diff --git a/crates/hypercolor-ui/src/app.rs b/crates/hypercolor-ui/src/app.rs
index 982a984a6..e9acea577 100644
--- a/crates/hypercolor-ui/src/app.rs
+++ b/crates/hypercolor-ui/src/app.rs
@@ -38,7 +38,7 @@ use crate::preferences::PreferencesStore;
 use crate::preview_telemetry::{PreviewPresenterTelemetry, PreviewTelemetryContext};
 use crate::thumbnails::{self, ThumbnailStore};
 use crate::toasts;
-use crate::ws::messages::scene_event_affects_active_effect;
+use crate::ws::messages::scene_event_requires_effect_refresh;
 use crate::ws::{
     AudioLevel, BackpressureNotice, CanvasFrame, ControlSurfaceEventHint, DeviceEventHint,
     EffectErrorHint, ExtensionEventHint, InputInjectEdge, InputSourceStatusEventHint,
@@ -934,10 +934,14 @@ pub fn app_view(ext: UiExtensions) -> impl IntoView {
                     .set_active_scene_mutation_mode
                     .set(Some(scene_mutation_mode));
             }
-            if current_scene_event
-                .as_ref()
-                .is_none_or(scene_event_affects_active_effect)
-            {
+            let target = effects_ctx.active_effect_target.get_untracked();
+            if current_scene_event.as_ref().is_none_or(|current| {
+                scene_event_requires_effect_refresh(
+                    previous_scene_event.as_ref().and_then(Option::as_ref),
+                    current,
+                    target.as_ref().map(|target| target.zone_id.as_str()),
+                )
+            }) {
                 effects_ctx.refresh_active_effect();
             }
 
diff --git a/crates/hypercolor-ui/src/components/layer_panel/controls.rs b/crates/hypercolor-ui/src/components/layer_panel/controls.rs
index 2948a03d0..1ba61d1c0 100644
--- a/crates/hypercolor-ui/src/components/layer_panel/controls.rs
+++ b/crates/hypercolor-ui/src/components/layer_panel/controls.rs
@@ -37,35 +37,57 @@ const LAYER_CONTROLS_DEBOUNCE_MS: f64 = 120.0;
 #[component]
 pub fn EffectControlsSection(
     zone_id: String,
-    layer: SceneLayer,
+    layer: Signal<SceneLayer>,
+    effect_cache: super::LayerEffectCache,
     on_layers_mutated: Callback<()>,
 ) -> impl IntoView {
     let LayerSource::Effect {
         effect_id,
         controls,
         ..
-    } = layer.source.clone()
+    } = layer.get_untracked().source
     else {
         return ().into_any();
     };
 
     let effect_id_str = effect_id.to_string();
+    let ws = expect_context::<crate::app::WsContext>();
     let detail = api::daemon_resource({
         let effect_id_str = effect_id_str.clone();
         move || {
             let effect_id_str = effect_id_str.clone();
-            async move { api::fetch_effect_detail(&effect_id_str).await }
+            let generation = ws.connection_generation.get();
+            async move {
+                if let Some((epoch, detail)) =
+                    effect_cache.with_value(|cache| cache.get(&effect_id_str).cloned())
+                    && epoch == generation
+                {
+                    return Ok(detail);
+                }
+                let detail = api::fetch_effect_detail(&effect_id_str).await?;
+                effect_cache.try_update_value(|cache| {
+                    cache.insert(effect_id_str, (generation, detail.clone()));
+                });
+                Ok::<_, api::ApiError>(detail)
+            }
         }
     });
+    // A same-effect layer replacement retires its write session, but its
+    // controls need not collapse to a loading placeholder while it mounts.
+    let detail_value = Signal::derive(move || {
+        detail.get().and_then(Result::ok).or_else(|| {
+            effect_cache
+                .with_value(|cache| cache.get(&effect_id_str).map(|(_, detail)| detail.clone()))
+        })
+    });
     let defs = Signal::derive(move || {
-        detail
+        detail_value
             .get()
-            .and_then(Result::ok)
             .map(|detail| detail.controls)
             .unwrap_or_default()
     });
     let screen_reactive = Signal::derive(move || {
-        detail.get().and_then(Result::ok).is_some_and(|detail| {
+        detail_value.get().is_some_and(|detail| {
             detail
                 .tags
                 .iter()
@@ -76,7 +98,7 @@ pub fn EffectControlsSection(
     // Optimistic local control values. Layer identity fences stale patches,
     // so the canonical control route carries no revision token.
     let (values, set_values) = signal(controls);
-    let layer_id = layer.id.to_string();
+    let layer_id = layer.get_untracked().id.to_string();
 
     let session_target = Signal::stored(Some(format!("{zone_id}:{layer_id}")));
     let patch: ControlPatchFn = Arc::new({
@@ -103,39 +125,44 @@ pub fn EffectControlsSection(
         on_error: Callback::new(|error: String| {
             toasts::toast_error(&format!("Effect controls failed: {error}"));
         }),
-        recover: on_layers_mutated,
+        recover: Callback::new(move |()| {
+            // A rejected edit can leave the server snapshot unchanged, so
+            // memo equality will not trigger the normal reconciliation effect.
+            if let LayerSource::Effect { controls, .. } = layer.get_untracked().source {
+                set_values.set(controls);
+            }
+            on_layers_mutated.run(());
+        }),
         on_committed: None,
         flush_guard: None,
     });
+    Effect::new(move |_| {
+        if let LayerSource::Effect { controls, .. } = layer.get().source {
+            session.reconcile_values.run(controls);
+        }
+    });
     let on_change = session.on_change;
 
     view! {
         <div class="space-y-2">
             <span class=label_class(LabelSize::Micro, LabelTone::Default)>"Effect controls"</span>
-            {move || {
-                if detail.get().is_none() {
-                    view! {
-                        <div class="rounded-lg border border-edge-subtle/50 bg-surface-sunken/40 px-3 py-4 text-center text-[11px] text-fg-tertiary/55">
-                            "Loading controls…"
-                        </div>
-                    }
-                        .into_any()
-                } else {
-                    view! {
-                        <ControlPanel
-                            controls=defs
-                            control_values=values
-                            accent_rgb=Signal::derive(|| LAYER_ACCENT_RGB.to_owned())
-                            on_change=on_change
-                        />
-                        <CaptureSharedControls
-                            visible=screen_reactive
-                            accent_rgb=Signal::derive(|| LAYER_ACCENT_RGB.to_owned())
-                        />
-                    }
-                        .into_any()
+            <Show
+                when=move || detail_value.get().is_some()
+                fallback=move || view! {
+                    <div class="rounded-lg border border-edge-subtle/50 bg-surface-sunken/40 px-3 py-4 text-center text-[11px] text-fg-tertiary/55">"Loading controls…"</div>
                 }
-            }}
+            >
+                <ControlPanel
+                    controls=defs
+                    control_values=values
+                    accent_rgb=Signal::derive(|| LAYER_ACCENT_RGB.to_owned())
+                    on_change=on_change
+                />
+                <CaptureSharedControls
+                    visible=screen_reactive
+                    accent_rgb=Signal::derive(|| LAYER_ACCENT_RGB.to_owned())
+                />
+            </Show>
         </div>
     }
     .into_any()
@@ -147,26 +174,31 @@ pub fn EffectControlsSection(
 #[component]
 pub fn MediaPlaybackSection(
     zone_id: String,
-    layer: SceneLayer,
-    revision: u64,
+    layer: Signal<SceneLayer>,
+    revision: Signal<u64>,
     on_layers_mutated: Callback<()>,
 ) -> impl IntoView {
-    let LayerSource::Media { playback, .. } = layer.source.clone() else {
+    let LayerSource::Media { playback, .. } = layer.get_untracked().source else {
         return ().into_any();
     };
-    let speed = playback.speed;
-    let loop_mode = playback.loop_mode;
-    let auto_play = playback.auto_play;
+    let playback = Memo::new(move |_| match layer.get().source {
+        LayerSource::Media { playback, .. } => playback,
+        _ => playback.clone(),
+    });
 
     // Rebuild the layer with a mutated `MediaPlayback` and push it.
     let push = {
-        let layer = layer.clone();
         move |mutate: &dyn Fn(&mut hypercolor_types::layer::MediaPlayback)| {
-            let mut next = layer.clone();
+            let mut next = layer.get_untracked();
             if let LayerSource::Media { playback, .. } = &mut next.source {
                 mutate(playback);
             }
-            update_layer(zone_id.clone(), next, revision, on_layers_mutated);
+            update_layer(
+                zone_id.clone(),
+                next,
+                revision.get_untracked(),
+                on_layers_mutated,
+            );
         }
     };
     let push_speed = push.clone();
@@ -177,12 +209,14 @@ pub fn MediaPlaybackSection(
         ("ping_pong".to_owned(), "Ping-pong".to_owned()),
         ("none".to_owned(), "Play once".to_owned()),
     ];
-    let loop_value = match loop_mode {
-        LoopMode::Loop => "loop",
-        LoopMode::PingPong => "ping_pong",
-        LoopMode::None => "none",
-    }
-    .to_owned();
+    let loop_value = move || {
+        match playback.get().loop_mode {
+            LoopMode::Loop => "loop",
+            LoopMode::PingPong => "ping_pong",
+            LoopMode::None => "none",
+        }
+        .to_owned()
+    };
 
     view! {
         <div class="space-y-3">
@@ -195,17 +229,17 @@ pub fn MediaPlaybackSection(
                     max="4"
                     step="0.05"
                     class="w-full accent-accent"
-                    prop:value=format!("{speed:.2}")
+                    prop:value=move || format!("{:.2}", playback.get().speed)
                     on:change=move |event| {
                         if let Some(value) = Change::from_event(event).value::<f32>() {
                             push_speed(&|playback| playback.speed = value.clamp(0.1, 4.0));
                         }
                     }
                 />
-                <span class="text-right tabular-nums">{format!("{speed:.2}×")}</span>
+                <span class="text-right tabular-nums">{move || format!("{:.2}×", playback.get().speed)}</span>
             </label>
             <crate::components::silk_select::SilkSelect
-                value=Signal::derive(move || loop_value.clone())
+                value=Signal::derive(loop_value)
                 options=Signal::derive(move || loop_options.clone())
                 on_change=Callback::new(move |value: String| {
                     let mode = match value.as_str() {
@@ -223,31 +257,29 @@ pub fn MediaPlaybackSection(
                 type="button"
                 class="flex w-full items-center justify-between rounded-lg border border-edge-subtle/60 bg-surface-sunken/40 px-3 py-2 text-[11px] text-fg-secondary chip-interactive"
                 on:click=move |_| {
-                    push_auto(&|playback| playback.auto_play = !auto_play);
+                    push_auto(&|playback| playback.auto_play = !playback.auto_play);
                 }
             >
                 <span>"Auto-play"</span>
-                <LayerToggleTrack on=auto_play />
+                <LayerToggleTrack on=Signal::derive(move || playback.get().auto_play) />
             </button>
         </div>
     }
     .into_any()
 }
 
-/// A compact Luminary toggle track — the switch visual without its own
-/// label row, for embedding in a layer card. The card rebuilds on every
-/// layer change, so a plain `bool` tracks state without a signal.
+/// A compact toggle track that follows the current layer playback state.
 #[component]
-pub fn LayerToggleTrack(on: bool) -> impl IntoView {
+pub fn LayerToggleTrack(#[prop(into)] on: Signal<bool>) -> impl IntoView {
     view! {
         <span
             class="relative inline-block h-4 w-7 shrink-0 rounded-full transition-colors duration-200"
-            class=("bg-accent/55", on)
-            class=("bg-fg-tertiary/20", !on)
+            class=("bg-accent/55", move || on.get())
+            class=("bg-fg-tertiary/20", move || !on.get())
         >
             <span
                 class="absolute left-0.5 top-0.5 h-3 w-3 rounded-full bg-white/85 transition-transform duration-200"
-                class=("translate-x-3", on)
+                class=("translate-x-3", move || on.get())
             />
         </span>
     }
diff --git a/crates/hypercolor-ui/src/components/layer_panel/mod.rs b/crates/hypercolor-ui/src/components/layer_panel/mod.rs
index fcd374125..8fda324d2 100644
--- a/crates/hypercolor-ui/src/components/layer_panel/mod.rs
+++ b/crates/hypercolor-ui/src/components/layer_panel/mod.rs
@@ -51,6 +51,9 @@ use source::{
     resolve_add_layer_targets,
 };
 
+/// Effect schemas survive layer replacements; a reconnect invalidates their epoch.
+pub type LayerEffectCache = StoredValue<HashMap<String, (u64, api::effects::EffectDetailResponse)>>;
+
 /// Layer-stack editor for one zone. See the module docs for the
 /// mount contract.
 #[component]
@@ -66,6 +69,10 @@ pub fn LayerPanel(
     layers_resource: LocalResource<api::ApiResult<api::LayerStackResponse>>,
     on_layers_mutated: Callback<()>,
 ) -> impl IntoView {
+    let effect_cache = LayerEffectCache::new(HashMap::new());
+    // Disclosure preference belongs to a visible stack slot, independently of
+    // the fresh layer authority minted by a whole-layer replacement.
+    let disclosures = StoredValue::new(HashMap::<(String, String, usize), bool>::new());
     // Content selection is owned here, not driven by the host page — the
     // asset list backs both media-name resolution and the picker's Media tab.
     let assets_resource = api::daemon_resource(|| async { api::list_assets().await });
@@ -105,6 +112,31 @@ pub fn LayerPanel(
             .map(|stack| stack.revision)
     });
 
+    let layers = Memo::new(move |_| {
+        layers_resource
+            .get()
+            .and_then(Result::ok)
+            .map(|stack| stack.items)
+            .unwrap_or_default()
+    });
+    let scene_id = Memo::new(move |_| {
+        active_scene
+            .get()
+            .map(|scene| scene.id.to_string())
+            .unwrap_or_default()
+    });
+    let revision = Signal::derive(move || scene_revision.get().unwrap_or_default());
+    let row_keys = Memo::new(move |_| {
+        let scene = scene_id.get();
+        let zone = selected_zone_id.get().unwrap_or_default();
+        layers
+            .get()
+            .into_iter()
+            .rev()
+            .map(|layer| (scene.clone(), zone.clone(), layer_mount_key(&layer)))
+            .collect::<Vec<_>>()
+    });
+
     // Per-layer runtime health streams in over the WebSocket, independent
     // of the layer stack itself; an absent context means no health yet.
     let ws = use_context::<WsContext>();
@@ -251,98 +283,62 @@ pub fn LayerPanel(
                     "Add layer"
                 </button>
 
-                <Suspense fallback=move || view! { <LayerLoadingSkeleton /> }>
-                    {move || match layers_resource.get() {
-                        None => view! { <LayerLoadingSkeleton /> }.into_any(),
-                        Some(Err(error)) => view! {
-                            <div class="rounded-lg border border-status-error/30 bg-status-error/10 px-3 py-3 text-xs text-status-error">
-                                {error.to_string()}
-                            </div>
-                        }.into_any(),
-                        Some(Ok(stack)) if stack.items.is_empty() => {
-                            // A screen may still be painting its stored
-                            // default face; only the scene's own stack is
-                            // empty, and the card above the panel says so.
-                            let copy = if selected_zone_role.get() == Some(ZoneRole::Display) {
-                                "No scene layers on this screen"
-                            } else {
-                                "No layers in this zone"
-                            };
-                            view! {
-                                <div class="rounded-lg border border-edge-subtle bg-surface-sunken/45 px-3 py-8 text-center text-xs text-fg-tertiary">
-                                    {copy}
-                                </div>
-                            }.into_any()
-                        }
-                        Some(Ok(stack)) => {
-                            // `try_get`: Suspense can re-poll this closure after
-                            // the panel instance owning these memos is disposed
-                            // (host swapped the mounted view mid-fetch). A plain
-                            // `get` panics the whole reactive runtime there.
-                            let (Some(names), Some(effect_name_map)) =
-                                (media_names.try_get(), effect_names.try_get())
-                            else {
-                                return view! { <LayerLoadingSkeleton /> }.into_any();
-                            };
-                            let scene_id = active_scene
-                                .get()
-                                .map(|scene| scene.id.to_string())
-                                .unwrap_or_default();
-                            let zone_id = selected_zone_id.get().unwrap_or_default();
-                            let revision = stack.revision;
-                            let total = stack.items.len();
-                            let mut rows = stack
-                                .items
-                                .iter()
-                                .cloned()
-                                .enumerate()
-                                .collect::<Vec<_>>();
-                            rows.reverse();
-                            // The Top/Bottom stack markers orient a real
-                            // stack; with a single layer there is no
-                            // ordering to convey, so they stay hidden.
-                            let show_stack_markers = total > 1;
+                <Show when=move || layers_resource.get().is_none()>
+                    <LayerLoadingSkeleton />
+                </Show>
+                {move || layers_resource.get().and_then(Result::err).map(|error| view! {
+                    <div class="rounded-lg border border-status-error/30 bg-status-error/10 px-3 py-3 text-xs text-status-error">{error.to_string()}</div>
+                })}
+                <Show when=move || layers_resource.get().is_some_and(|result| result.is_ok()) && layers.with(Vec::is_empty)>
+                    <div class="rounded-lg border border-edge-subtle bg-surface-sunken/45 px-3 py-8 text-center text-xs text-fg-tertiary">
+                        {move || if selected_zone_role.get() == Some(ZoneRole::Display) { "No scene layers on this screen" } else { "No layers in this zone" }}
+                    </div>
+                </Show>
+                <div class="space-y-2">
+                    <Show when=move || layers.with(|layers| layers.len() > 1)>
+                        <div class="text-[10px] font-mono uppercase tracking-wide text-fg-tertiary/65">"Top"</div>
+                    </Show>
+                    <For
+                        each=move || row_keys.get()
+                        key=|key| key.clone()
+                        children=move |(scene_id, zone_id, (layer_id, _))| {
+                            let initial = layers.with_untracked(|layers| layers.iter().find(|layer| layer.id.to_string() == layer_id).cloned()).expect("keyed layer is present when mounted");
+                            let lookup_id = layer_id.clone();
+                            let current_layer = Memo::new(move |_| {
+                                layers.with(|layers| layers.iter().find(|layer| layer.id.to_string() == lookup_id).cloned()).unwrap_or_else(|| initial.clone())
+                            });
+                            let stack_index = Signal::derive(move || layers.with(|layers| layers.iter().position(|layer| layer.id.to_string() == layer_id).unwrap_or_default()));
+                            let disclosure_key = (scene_id.clone(), zone_id.clone(), stack_index.get_untracked());
+                            let expanded = disclosures.with_value(|states| states.get(&disclosure_key).copied().unwrap_or(false));
+                            let on_disclosure = Callback::new(move |open| {
+                                let mut key = disclosure_key.clone();
+                                key.2 = stack_index.get_untracked();
+                                disclosures.update_value(|states| { states.insert(key, open); });
+                            });
+                            let row_health_key = layer_health_key(&scene_id, &zone_id, &current_layer.get_untracked().id.to_string());
+                            let row_health = Signal::derive(move || layer_health.with(|map| map.get(&row_health_key).cloned()));
                             view! {
-                                <div class="space-y-2">
-                                    {show_stack_markers.then(|| view! {
-                                        <div class="text-[10px] font-mono uppercase tracking-wide text-fg-tertiary/65">
-                                            "Top"
-                                        </div>
-                                    })}
-                                    {rows.into_iter().map(|(stack_index, layer)| {
-                                        let row_health_key = layer_health_key(
-                                            &scene_id,
-                                            &zone_id,
-                                            &layer.id.to_string(),
-                                        );
-                                        let row_health = Signal::derive(move || {
-                                            layer_health.with(|map| map.get(&row_health_key).cloned())
-                                        });
-                                        view! {
-                                            <LayerRow
-                                                zone_id=zone_id.clone()
-                                                layer=layer
-                                                stack_index=stack_index
-                                                total_layers=total
-                                                stack=stack.items.clone()
-                                                revision=revision
-                                                media_names=names.clone()
-                                                effect_names=effect_name_map.clone()
-                                                health=row_health
-                                                on_layers_mutated=on_layers_mutated
-                                            />
-                                        }
-                                    }).collect_view()}
-                                    {show_stack_markers.then(|| view! {
-                                        <div class="text-[10px] font-mono uppercase tracking-wide text-fg-tertiary/65">
-                                            "Bottom"
-                                        </div>
-                                    })}
-                                </div>
-                            }.into_any()
+                                <LayerRow
+                                    zone_id=zone_id
+                                    layer=current_layer.into()
+                                    stack_index=stack_index
+                                    stack=layers.into()
+                                    revision=revision
+                                    media_names=media_names
+                                    effect_names=effect_names
+                                    effect_cache=effect_cache
+                                    expanded=expanded
+                                    on_disclosure=on_disclosure
+                                    health=row_health
+                                    on_layers_mutated=on_layers_mutated
+                                />
+                            }
                         }
-                    }}
-                </Suspense>
+                    />
+                    <Show when=move || layers.with(|layers| layers.len() > 1)>
+                        <div class="text-[10px] font-mono uppercase tracking-wide text-fg-tertiary/65">"Bottom"</div>
+                    </Show>
+                </div>
             </div>
 
             <Show when=move || show_picker.get()>
@@ -436,3 +432,16 @@ fn reorder_layer(
         }
     });
 }
+
+/// Keep editors mounted across value/revision changes, but retire a session
+/// when its layer or source identity changes.
+#[must_use]
+pub fn layer_mount_key(layer: &SceneLayer) -> (String, String) {
+    use hypercolor_types::layer::LayerSource;
+    let source = match &layer.source {
+        LayerSource::Effect { effect_id, .. } => format!("effect:{effect_id}"),
+        LayerSource::Media { asset_id, .. } => format!("media:{asset_id}"),
+        other => row::source_meta(other).2.to_owned(),
+    };
+    (layer.id.to_string(), source)
+}
diff --git a/crates/hypercolor-ui/src/components/layer_panel/row.rs b/crates/hypercolor-ui/src/components/layer_panel/row.rs
index 41085e276..f2619bc84 100644
--- a/crates/hypercolor-ui/src/components/layer_panel/row.rs
+++ b/crates/hypercolor-ui/src/components/layer_panel/row.rs
@@ -64,46 +64,34 @@ pub fn layer_title(
 #[component]
 pub fn LayerRow(
     zone_id: String,
-    layer: SceneLayer,
-    stack_index: usize,
-    total_layers: usize,
-    stack: Vec<SceneLayer>,
-    revision: u64,
-    media_names: HashMap<String, String>,
-    effect_names: HashMap<String, String>,
+    layer: Signal<SceneLayer>,
+    stack_index: Signal<usize>,
+    stack: Signal<Vec<SceneLayer>>,
+    revision: Signal<u64>,
+    media_names: Memo<HashMap<String, String>>,
+    effect_names: Memo<HashMap<String, String>>,
+    effect_cache: super::LayerEffectCache,
+    expanded: bool,
+    on_disclosure: Callback<bool>,
     #[prop(into)] health: Signal<Option<LayerHealth>>,
     on_layers_mutated: Callback<()>,
 ) -> impl IntoView {
-    let (icon, accent_rgb, kind_word) = source_meta(&layer.source);
-    let title = layer_title(&layer, &media_names, &effect_names, kind_word);
-    let layer_id = layer.id.to_string();
-    let is_effect = matches!(layer.source, LayerSource::Effect { .. });
-    let is_media = matches!(layer.source, LayerSource::Media { .. });
-    // A lone layer has nowhere to move; reorder appears only in a stack.
-    let show_reorder = total_layers > 1;
-    let can_move_up = stack_index + 1 < total_layers;
-    let can_move_down = stack_index > 0;
-    let opacity = layer.opacity;
-    let blend = layer.blend;
-    let fit = layer.transform.fit;
-    let brightness = layer.adjust.brightness;
-    let saturation = layer.adjust.saturation;
-    let tint_strength = layer.adjust.tint_strength;
-    let scale_x = layer.transform.scale[0];
-    let scale_y = layer.transform.scale[1];
-
-    let blend_layer = layer.clone();
-    let opacity_layer = layer.clone();
-    let fit_layer = layer.clone();
-    let brightness_layer = layer.clone();
-    let saturation_layer = layer.clone();
-    let tint_layer = layer.clone();
-    let scale_x_layer = layer.clone();
-    let scale_y_layer = layer.clone();
-    let effect_layer = layer.clone();
-    let media_layer = layer.clone();
-    let move_up_stack = stack.clone();
-    let move_down_stack = stack;
+    let initial = layer.get_untracked();
+    let (icon, accent_rgb, kind_word) = source_meta(&initial.source);
+    let title = move || {
+        layer_title(
+            &layer.get(),
+            &media_names.get(),
+            &effect_names.get(),
+            kind_word,
+        )
+    };
+    let layer_id = initial.id.to_string();
+    let is_effect = matches!(initial.source, LayerSource::Effect { .. });
+    let is_media = matches!(initial.source, LayerSource::Media { .. });
+    let show_reorder = move || stack.with(|layers| layers.len() > 1);
+    let can_move_up = move || stack_index.get() + 1 < stack.with(Vec::len);
+    let can_move_down = move || stack_index.get() > 0;
 
     let chip_style = format!("background: rgba({accent_rgb}, 0.14)");
     let icon_style = format!("color: rgb({accent_rgb})");
@@ -130,24 +118,24 @@ pub fn LayerRow(
                     </span>
                 </div>
                 <div class="flex shrink-0 items-center gap-1">
-                    {show_reorder
+                    {let zone_id = zone_id.clone(); move || show_reorder()
                         .then(|| {
                             let zone_up = zone_id.clone();
                             let zone_down = zone_id.clone();
-                            let up_stack = move_up_stack.clone();
-                            let down_stack = move_down_stack.clone();
+                            let up_stack = stack;
+                            let down_stack = stack;
                             view! {
                                 <button
                                     type="button"
                                     class="rounded-md p-1.5 text-fg-tertiary transition-colors hover:text-fg-primary disabled:opacity-25"
-                                    disabled=!can_move_up
+                                    disabled=move || !can_move_up()
                                     title="Move layer up"
                                     on:click=move |_| reorder_layer(
                                         zone_up.clone(),
-                                        up_stack.clone(),
-                                        stack_index,
+                                        up_stack.get_untracked(),
+                                        stack_index.get_untracked(),
                                         1,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     )
                                 >
@@ -156,14 +144,14 @@ pub fn LayerRow(
                                 <button
                                     type="button"
                                     class="rounded-md p-1.5 text-fg-tertiary transition-colors hover:text-fg-primary disabled:opacity-25"
-                                    disabled=!can_move_down
+                                    disabled=move || !can_move_down()
                                     title="Move layer down"
                                     on:click=move |_| reorder_layer(
                                         zone_down.clone(),
-                                        down_stack.clone(),
-                                        stack_index,
+                                        down_stack.get_untracked(),
+                                        stack_index.get_untracked(),
                                         -1,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     )
                                 >
@@ -181,7 +169,7 @@ pub fn LayerRow(
                             move |_| delete_layer(
                                 zone_id.clone(),
                                 layer_id.clone(),
-                                revision,
+                                revision.get_untracked(),
                                 on_layers_mutated,
                             )
                         }
@@ -195,17 +183,17 @@ pub fn LayerRow(
                 // ── Blend ─────────────────────────────────────────────
                 <div class="min-w-0">
                         <SilkSelect
-                            value=Signal::derive(move || blend_value(blend).to_owned())
+                            value=Signal::derive(move || blend_value(layer.get().blend).to_owned())
                             options=Signal::derive(blend_options)
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: String| {
-                                    let mut next = blend_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.blend = parse_blend(&value);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -230,17 +218,17 @@ pub fn LayerRow(
                         max="1"
                         step="0.01"
                         class="slider-silk min-w-0 flex-1 cursor-pointer"
-                        prop:value=format!("{opacity:.2}")
+                        prop:value=move || format!("{:.2}", layer.get().opacity)
                         on:change={
                             let zone_id = zone_id.clone();
                             move |event| {
                                 if let Some(value) = Change::from_event(event).value::<f32>() {
-                                    let mut next = opacity_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.opacity = value.clamp(0.0, 1.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -251,7 +239,7 @@ pub fn LayerRow(
                         class="w-[40px] shrink-0 rounded px-1.5 py-0.5 text-right font-mono text-[10px] tabular-nums"
                         style="color: rgba(225, 53, 255, 0.85); background: rgba(225, 53, 255, 0.1)"
                     >
-                        {format!("{:.0}%", opacity * 100.0)}
+                        {move || format!("{:.0}%", layer.get().opacity * 100.0)}
                     </span>
                 </div>
 
@@ -262,7 +250,8 @@ pub fn LayerRow(
                             <div class="border-t border-edge-subtle/40 pt-3">
                                 <EffectControlsSection
                                     zone_id=zone_id.clone()
-                                    layer=effect_layer.clone()
+                                    layer=layer
+                                    effect_cache=effect_cache
                                     on_layers_mutated=on_layers_mutated
                                 />
                             </div>
@@ -274,7 +263,7 @@ pub fn LayerRow(
                             <div class="border-t border-edge-subtle/40 pt-3">
                                 <MediaPlaybackSection
                                     zone_id=zone_id.clone()
-                                    layer=media_layer.clone()
+                                    layer=layer
                                     revision=revision
                                     on_layers_mutated=on_layers_mutated
                                 />
@@ -283,24 +272,35 @@ pub fn LayerRow(
                     })}
 
                 // ── Transform & color disclosure ──────────────────────
-                <details class="rounded-lg border border-edge-subtle/55 bg-surface-overlay/25">
+                <details
+                    class="rounded-lg border border-edge-subtle/55 bg-surface-overlay/25"
+                    open=expanded
+                    on:toggle=move |event| {
+                        let element: web_sys::Element = event_target(&event);
+                        // Removal can dispatch a final toggle; it must not
+                        // overwrite the preference adopted by the new row.
+                        if element.is_connected() {
+                            on_disclosure.run(element.has_attribute("open"));
+                        }
+                    }
+                >
                     <summary class="flex cursor-pointer items-center gap-1.5 px-3 py-2 text-[11px] font-semibold text-fg-secondary">
                         <Icon icon=LuChevronRight width="12px" height="12px" />
                         "Transform & Color"
                     </summary>
                     <div class="space-y-3 border-t border-edge-subtle/45 px-3 py-3">
                         <SilkSelect
-                            value=Signal::derive(move || fit_value(fit).to_owned())
+                            value=Signal::derive(move || fit_value(layer.get().transform.fit).to_owned())
                             options=Signal::derive(fit_options)
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: String| {
-                                    let mut next = fit_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.transform.fit = parse_fit(&value);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -311,19 +311,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Brightness"
-                            value=brightness
+                            value=Signal::derive(move || layer.get().adjust.brightness)
                             min=0.0
                             max=4.0
                             step=0.05
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = brightness_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.adjust.brightness = value.clamp(0.0, 4.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -331,19 +331,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Saturation"
-                            value=saturation
+                            value=Signal::derive(move || layer.get().adjust.saturation)
                             min=0.0
                             max=4.0
                             step=0.05
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = saturation_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.adjust.saturation = value.clamp(0.0, 4.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -351,19 +351,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Tint"
-                            value=tint_strength
+                            value=Signal::derive(move || layer.get().adjust.tint_strength)
                             min=0.0
                             max=1.0
                             step=0.01
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = tint_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.adjust.tint_strength = value.clamp(0.0, 1.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -371,19 +371,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Scale X"
-                            value=scale_x
+                            value=Signal::derive(move || layer.get().transform.scale[0])
                             min=0.1
                             max=4.0
                             step=0.05
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = scale_x_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.transform.scale[0] = value.clamp(0.1, 4.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -391,19 +391,19 @@ pub fn LayerRow(
                         />
                         <LayerSlider
                             label="Scale Y"
-                            value=scale_y
+                            value=Signal::derive(move || layer.get().transform.scale[1])
                             min=0.1
                             max=4.0
                             step=0.05
                             on_change=Callback::new({
                                 let zone_id = zone_id.clone();
                                 move |value: f32| {
-                                    let mut next = scale_y_layer.clone();
+                                    let mut next = layer.get_untracked();
                                     next.transform.scale[1] = value.clamp(0.1, 4.0);
                                     update_layer(
                                         zone_id.clone(),
                                         next,
-                                        revision,
+                                        revision.get_untracked(),
                                         on_layers_mutated,
                                     );
                                 }
@@ -419,7 +419,7 @@ pub fn LayerRow(
 #[component]
 fn LayerSlider(
     label: &'static str,
-    value: f32,
+    value: Signal<f32>,
     min: f32,
     max: f32,
     step: f32,
@@ -434,14 +434,14 @@ fn LayerSlider(
                 max=max.to_string()
                 step=step.to_string()
                 class="w-full accent-accent"
-                prop:value=format!("{value:.2}")
+                prop:value=move || format!("{:.2}", value.get())
                 on:change=move |event| {
                     if let Some(value) = Change::from_event(event).value::<f32>() {
                         on_change.run(value);
                     }
                 }
             />
-            <span class="text-right tabular-nums">{format!("{value:.2}")}</span>
+            <span class="text-right tabular-nums">{move || format!("{:.2}", value.get())}</span>
         </label>
     }
 }
diff --git a/crates/hypercolor-ui/src/control_session.rs b/crates/hypercolor-ui/src/control_session.rs
index dbc971039..11a7780f8 100644
--- a/crates/hypercolor-ui/src/control_session.rs
+++ b/crates/hypercolor-ui/src/control_session.rs
@@ -85,6 +85,8 @@ pub struct ControlPatchSession {
     pub flush_now: Callback<()>,
     /// Drop any queued-but-unsent edits.
     pub clear_pending: Callback<()>,
+    /// Adopt server values while preserving this target's unconfirmed edits.
+    pub reconcile_values: Callback<ControlValueMap>,
     /// Live version token echoed as `If-Match`; `None` for unversioned
     /// surfaces. Adopted from `Applied`/`Stale` outcomes automatically.
     pub version: RwSignal<Option<u64>>,
@@ -212,6 +214,7 @@ pub fn use_control_patch_session(config: ControlPatchConfig) -> ControlPatchSess
                     }
                     let mut retried = false;
                     loop {
+                        optimistic.track_in_flight(&batch);
                         let outcome = patch(
                             batch.target.clone(),
                             batch.values.clone(),
@@ -304,11 +307,18 @@ pub fn use_control_patch_session(config: ControlPatchConfig) -> ControlPatchSess
     let flush_now = Callback::new(move |()| flush_core());
     let clear_pending = Callback::new(move |()| optimistic.clear_pending());
 
+    let reconcile_values = Callback::new(move |values| {
+        if let Some(target) = target.get_untracked() {
+            set_values.set(optimistic.reconcile_values(&target, values));
+        }
+    });
+
     ControlPatchSession {
         on_change,
         on_changes,
         flush_now,
         clear_pending,
+        reconcile_values,
         version,
     }
 }
diff --git a/crates/hypercolor-ui/src/optimistic_controls.rs b/crates/hypercolor-ui/src/optimistic_controls.rs
index fc437e814..18f37b7e4 100644
--- a/crates/hypercolor-ui/src/optimistic_controls.rs
+++ b/crates/hypercolor-ui/src/optimistic_controls.rs
@@ -22,7 +22,7 @@ pub(crate) struct OptimisticControlSession {
 #[derive(Default)]
 struct ControlMutationQueue {
     pending: Option<ControlMutationBatch>,
-    in_flight: bool,
+    in_flight: Option<ControlMutationBatch>,
 }
 
 impl ControlMutationQueue {
@@ -45,7 +45,7 @@ impl ControlMutationQueue {
     }
 
     fn start_flush_for(&mut self, active_target: &str) -> Result<Option<ControlMutationBatch>, ()> {
-        if self.in_flight {
+        if self.in_flight.is_some() {
             return Ok(None);
         }
         let Some(batch) = self.pending.take() else {
@@ -54,16 +54,18 @@ impl ControlMutationQueue {
         if batch.target != active_target {
             return Err(());
         }
-        self.in_flight = true;
+        self.in_flight = Some(batch.clone());
         Ok(Some(batch))
     }
 
     fn complete_flush(&mut self) -> Option<ControlMutationBatch> {
         if self.pending.is_none() {
-            self.in_flight = false;
+            self.in_flight = None;
             None
         } else {
-            self.pending.take()
+            let next = self.pending.take();
+            self.in_flight = next.clone();
+            next
         }
     }
 
@@ -71,7 +73,7 @@ impl ControlMutationQueue {
         &mut self,
         active_target: &str,
     ) -> Result<Option<ControlMutationBatch>, ()> {
-        self.in_flight = false;
+        self.in_flight = None;
         self.start_flush_for(active_target)
     }
 
@@ -86,9 +88,21 @@ impl ControlMutationQueue {
         }
     }
 
+    fn reconcile_values(&self, target: &str, mut values: ControlValueMap) -> ControlValueMap {
+        for batch in [self.in_flight.as_ref(), self.pending.as_ref()]
+            .into_iter()
+            .flatten()
+        {
+            if batch.target == target {
+                merge_control_values(&mut values, &batch.values);
+            }
+        }
+        values
+    }
+
     fn fail_flush(&mut self) {
         self.pending = None;
-        self.in_flight = false;
+        self.in_flight = None;
     }
 
     fn clear_pending(&mut self) {
@@ -166,6 +180,16 @@ impl OptimisticControlSession {
             .unwrap_or_default()
     }
 
+    pub(crate) fn reconcile_values(self, target: &str, values: ControlValueMap) -> ControlValueMap {
+        self.queue
+            .with_value(|queue| queue.reconcile_values(target, values))
+    }
+
+    pub(crate) fn track_in_flight(self, batch: &ControlMutationBatch) {
+        self.queue
+            .update_value(|queue| queue.in_flight = Some(batch.clone()));
+    }
+
     pub(crate) fn fail_flush(self) {
         let _ = self
             .queue
@@ -233,6 +257,42 @@ mod tests {
 
     use super::{ControlMutationQueue, ControlValueMap};
 
+    #[test]
+    fn server_snapshot_preserves_pending_and_in_flight_values_for_its_target() {
+        let mut queue = ControlMutationQueue::default();
+        queue.insert("layer-a".into(), "speed".into(), ControlValue::Float(0.5));
+        queue.start_flush_for("layer-a").expect("valid target");
+        queue.insert("layer-a".into(), "speed".into(), ControlValue::Float(0.8));
+        let server = ControlValueMap::from([
+            ("speed".into(), ControlValue::Float(0.2)),
+            ("hue".into(), ControlValue::Int(120)),
+        ]);
+        let merged = queue.reconcile_values("layer-a", server.clone());
+        assert_eq!(merged["speed"], ControlValue::Float(0.8));
+        assert_eq!(merged["hue"], ControlValue::Int(120));
+        assert_eq!(queue.reconcile_values("layer-b", server.clone()), server);
+        queue.complete_flush();
+        assert_eq!(
+            queue.reconcile_values("layer-a", server.clone())["speed"],
+            ControlValue::Float(0.8)
+        );
+        queue.complete_flush();
+        assert_eq!(queue.reconcile_values("layer-a", server.clone()), server);
+    }
+
+    #[test]
+    fn failed_patch_recovery_accepts_authoritative_values() {
+        let mut queue = ControlMutationQueue::default();
+        queue.insert("layer-a".into(), "speed".into(), ControlValue::Float(0.5));
+        queue.start_flush_for("layer-a").expect("valid target");
+        queue.fail_flush();
+        assert!(
+            queue
+                .reconcile_values("layer-a", ControlValueMap::new())
+                .is_empty()
+        );
+    }
+
     #[test]
     fn in_flight_flush_drains_distinct_newer_keys_in_a_second_batch() {
         let mut queue = ControlMutationQueue::default();
diff --git a/crates/hypercolor-ui/src/pages/studio/mod.rs b/crates/hypercolor-ui/src/pages/studio/mod.rs
index 663b2dcc7..b36c68fc3 100644
--- a/crates/hypercolor-ui/src/pages/studio/mod.rs
+++ b/crates/hypercolor-ui/src/pages/studio/mod.rs
@@ -254,27 +254,7 @@ pub fn StudioPage() -> impl IntoView {
                 }),
             _ => Ok(empty_layer_stack()),
         });
-        // Control events intentionally leave the structural scene cache alone.
-        // On selection, recover fresh control values and an If-Match revision
-        // if the latest event invalidated that cache. Reading the hint untracked
-        // keeps slider-rate events from rebuilding the inspector.
-        let refresh_zone = zone_id.filter(|id| {
-            id != UNASSIGNED_SURFACE_ID
-                && active_scene.with_untracked(Option::is_some)
-                && ws.last_scene_event.with_untracked(|hint| {
-                    hint.as_ref().is_some_and(|hint| {
-                        hint.event_type == "zone_changed"
-                            && hint.zone_change_kind
-                                == Some(hypercolor_types::event::ZoneChangeKind::ControlsPatched)
-                    })
-                })
-        });
-        async move {
-            match refresh_zone {
-                Some(zone_id) => api::list_layers(&zone_id).await,
-                None => stack,
-            }
-        }
+        async move { stack }
     });
 
     let on_layers_mutated = Callback::new(move |()| {
@@ -285,9 +265,13 @@ pub fn StudioPage() -> impl IntoView {
     // The selected Screen's face rides the display face endpoint, which
     // reports the scene layer or the stored default, whichever is live.
     // It refetches on selection, after every face write from this page,
-    // and on any scene event (the daemon publishes zone_changed for
+    // and on structural scene events (the daemon publishes zone_changed for
     // default-face writes too), so it never needs a timer.
     let (face_tick, set_face_tick) = signal(0_u64);
+    let face_scene_generation = Memo::new(move |_| {
+        ws.last_scene_event
+            .with(|hint| hint.as_ref().map_or(0, |hint| hint.structural_generation))
+    });
     let selected_screen_device = Memo::new(move |_| {
         let selected = selected_surface_id.get()?;
         let scene = active_scene.get()?;
@@ -295,7 +279,7 @@ pub fn StudioPage() -> impl IntoView {
     });
     let screen_face_resource = api::daemon_resource(move || {
         let _ = face_tick.get();
-        let _ = ws.last_scene_event.get();
+        let _ = face_scene_generation.get();
         let device_id = selected_screen_device.get();
         async move {
             match device_id {
diff --git a/crates/hypercolor-ui/src/ws/messages.rs b/crates/hypercolor-ui/src/ws/messages.rs
index e4606aad2..919a6531d 100644
--- a/crates/hypercolor-ui/src/ws/messages.rs
+++ b/crates/hypercolor-ui/src/ws/messages.rs
@@ -434,6 +434,13 @@ pub struct DeviceEventHint {
 #[derive(Debug, Clone, PartialEq, Eq)]
 pub struct SceneEventHint {
     pub generation: u64,
+    /// Scene commits, excluding per-control notifications for the same commit.
+    pub scene_generation: u64,
+    /// Invalidation epochs survive later control hints in the same reactive turn.
+    pub structural_generation: u64,
+    pub active_effect_generation: u64,
+    /// Per-zone control epochs keep remote changes visible across batched hints.
+    pub control_generations: HashMap<String, u64>,
     pub event_type: String,
     pub scene_id: Option<String>,
     /// Zone (render zone) the event names, for zone-tagged events like
@@ -454,6 +461,29 @@ pub fn sequence_scene_event_hint(
     mut next: SceneEventHint,
 ) -> SceneEventHint {
     next.generation = previous.map_or(1, |hint| hint.generation.wrapping_add(1));
+    next.scene_generation = previous
+        .map_or(0, |hint| hint.scene_generation)
+        .wrapping_add(u64::from(next.event_type != "effect_control_changed"));
+    next.structural_generation = previous
+        .map_or(0, |hint| hint.structural_generation)
+        .wrapping_add(u64::from(!scene_event_is_control_change(&next)));
+    next.active_effect_generation = previous
+        .map_or(0, |hint| hint.active_effect_generation)
+        .wrapping_add(u64::from(scene_event_affects_active_effect(&next)));
+    if next.event_type != "active_scene_changed" {
+        next.control_generations = previous
+            .map(|hint| hint.control_generations.clone())
+            .unwrap_or_default();
+    }
+    if next.event_type == "zone_changed"
+        && next.zone_change_kind == Some(ZoneChangeKind::ControlsPatched)
+    {
+        let generation = next
+            .control_generations
+            .entry(next.zone_id.clone().unwrap_or_default())
+            .or_default();
+        *generation = generation.wrapping_add(1);
+    }
     next
 }
 
@@ -1281,6 +1311,10 @@ pub fn extract_scene_event_hint(
 
     SceneEventHint {
         generation: 0,
+        scene_generation: 0,
+        structural_generation: 0,
+        active_effect_generation: 0,
+        control_generations: HashMap::new(),
         event_type: event_type.to_owned(),
         scene_id: scene_data
             .get("current")
@@ -1341,6 +1375,9 @@ fn update_scene_event_hint(
 }
 
 pub fn scene_event_affects_active_effect(hint: &SceneEventHint) -> bool {
+    if scene_event_is_control_change(hint) {
+        return false;
+    }
     match hint.event_type.as_str() {
         // Library CRUD and scene-settings tweaks never change what's
         // rendering right now.
@@ -1350,6 +1387,28 @@ pub fn scene_event_affects_active_effect(hint: &SceneEventHint) -> bool {
     }
 }
 
+/// Control changes update the shared scene's values, not effect metadata or faces.
+pub fn scene_event_is_control_change(hint: &SceneEventHint) -> bool {
+    hint.event_type == "effect_control_changed"
+        || (hint.event_type == "zone_changed"
+            && hint.zone_change_kind == Some(ZoneChangeKind::ControlsPatched))
+}
+
+/// Whether the current effect needs metadata or authoritative controls refetched.
+pub fn scene_event_requires_effect_refresh(
+    previous: Option<&SceneEventHint>,
+    current: &SceneEventHint,
+    zone_id: Option<&str>,
+) -> bool {
+    current.active_effect_generation != previous.map_or(0, |hint| hint.active_effect_generation)
+        || current.control_generations.get("")
+            != previous.and_then(|hint| hint.control_generations.get(""))
+        || zone_id.is_some_and(|zone_id| {
+            current.control_generations.get(zone_id)
+                != previous.and_then(|hint| hint.control_generations.get(zone_id))
+        })
+}
+
 fn extract_device_event_hint(
     event_type: &str,
     data: Option<&serde_json::Value>,
diff --git a/crates/hypercolor-ui/src/zones.rs b/crates/hypercolor-ui/src/zones.rs
index c49c0c6fe..c25c27f1c 100644
--- a/crates/hypercolor-ui/src/zones.rs
+++ b/crates/hypercolor-ui/src/zones.rs
@@ -290,10 +290,21 @@ pub fn provide_scene_contexts(
         });
     });
 
-    // WS-driven freshness: any scene event refreshes the active scene
-    // (except pure control patches — those arrive at slider-drag rate
-    // and don't change scene structure); activation and library CRUD
-    // also refresh the list.
+    // A zone commit includes every control value and the new scene revision.
+    // Its per-control notifications share that invalidation, so a compound
+    // edit fetches one authoritative snapshot instead of one per control.
+    let scene_generation = Memo::new(move |_| {
+        last_scene_event.with(|hint| hint.as_ref().map_or(0, |hint| hint.scene_generation))
+    });
+    Effect::new(move |previous: Option<u64>| {
+        let current = scene_generation.get();
+        if previous.unwrap_or_default() != current {
+            active_scene_resource.refetch();
+        }
+        current
+    });
+
+    // Activation and library CRUD also refresh the saved-scene list.
     Effect::new(move |previous: Option<Option<SceneEventHint>>| {
         let current = last_scene_event.get();
         if previous.as_ref() == Some(&current) {
@@ -303,12 +314,6 @@ pub fn provide_scene_contexts(
             return current;
         };
 
-        let controls_only = hint.event_type == "zone_changed"
-            && hint.zone_change_kind
-                == Some(hypercolor_types::event::ZoneChangeKind::ControlsPatched);
-        if !controls_only {
-            active_scene_resource.refetch();
-        }
         if matches!(
             hint.event_type.as_str(),
             "active_scene_changed" | "scene_library_changed"
diff --git a/crates/hypercolor-ui/tests/layer_panel_tests.rs b/crates/hypercolor-ui/tests/layer_panel_tests.rs
index f58c9f2f4..6e0dc1dc1 100644
--- a/crates/hypercolor-ui/tests/layer_panel_tests.rs
+++ b/crates/hypercolor-ui/tests/layer_panel_tests.rs
@@ -25,6 +25,38 @@ use hypercolor_ui::components::layer_panel::source::{
 /// A valid UUID string for effect/media id parsing.
 const SAMPLE_ID: &str = "0192f5a0-1234-7890-abcd-ef0123456789";
 
+#[test]
+fn layer_editor_identity_survives_values_but_retires_replaced_sources() {
+    use hypercolor_ui::components::layer_panel::layer_mount_key;
+    let mut layer = SceneLayer {
+        id: SceneLayerId::new(),
+        name: None,
+        source: effect_layer_source(SAMPLE_ID).expect("valid effect"),
+        blend: BlendMode::Screen,
+        opacity: 1.0,
+        transform: LayerTransform::default(),
+        adjust: LayerAdjust::default(),
+        bindings: Vec::new(),
+        enabled: true,
+    };
+    let original = layer_mount_key(&layer);
+    layer.opacity = 0.5;
+    layer.name = Some("Renamed".into());
+    if let LayerSource::Effect { controls, .. } = &mut layer.source {
+        controls.insert(
+            "speed".into(),
+            hypercolor_types::control::ControlValue::Float(0.8),
+        );
+    }
+    assert_eq!(layer_mount_key(&layer), original);
+    layer.source =
+        effect_layer_source("0192f5a0-1234-7890-abcd-ef0123456790").expect("valid effect");
+    assert_ne!(layer_mount_key(&layer), original);
+    layer.source = effect_layer_source(SAMPLE_ID).expect("valid effect");
+    layer.id = SceneLayerId::new();
+    assert_ne!(layer_mount_key(&layer), original);
+}
+
 #[test]
 fn layer_replacement_uses_the_canonical_creation_shape() {
     let layer = SceneLayer {
diff --git a/crates/hypercolor-ui/tests/ws_messages_tests.rs b/crates/hypercolor-ui/tests/ws_messages_tests.rs
index f73d05b85..b1d676def 100644
--- a/crates/hypercolor-ui/tests/ws_messages_tests.rs
+++ b/crates/hypercolor-ui/tests/ws_messages_tests.rs
@@ -7,7 +7,8 @@ use hypercolor_ui::ws::messages::{
     OutputPowerReconciler, PerformanceMetrics, SCENE_EVENTS, extract_effect_error_hint,
     extract_layer_health, extract_scene_event_hint, initial_subscription_admission,
     is_resync_required, layer_health_key, reset_layer_health_cache,
-    scene_event_affects_active_effect, sequence_scene_event_hint, zone_has_degraded_layer,
+    scene_event_affects_active_effect, scene_event_requires_effect_refresh,
+    sequence_scene_event_hint, zone_has_degraded_layer,
 };
 
 #[test]
@@ -71,7 +72,7 @@ fn layout_changes_invalidate_layout_resources_without_control_chatter() {
 }
 
 #[test]
-fn control_changes_are_authoritative_scene_refresh_hints() {
+fn control_changes_do_not_invalidate_effect_metadata() {
     assert!(SCENE_EVENTS.contains(&"effect_control_changed"));
     let hint = extract_scene_event_hint(
         "effect_control_changed",
@@ -82,7 +83,142 @@ fn control_changes_are_authoritative_scene_refresh_hints() {
         }),
     );
     assert_eq!(hint.zone_id.as_deref(), Some("zone-2"));
-    assert!(scene_event_affects_active_effect(&hint));
+    assert!(!scene_event_affects_active_effect(&hint));
+}
+
+#[test]
+fn a_compound_control_edit_invalidates_the_scene_once_without_reloading_faces() {
+    let before = sequence_scene_event_hint(
+        None,
+        extract_scene_event_hint(
+            "active_scene_changed",
+            &serde_json::json!({"current": "scene-1"}),
+        ),
+    );
+    let commit = sequence_scene_event_hint(
+        Some(&before),
+        extract_scene_event_hint(
+            "zone_changed",
+            &serde_json::json!({"zone_id": "screen", "kind": "controls_patched", "role": "display"}),
+        ),
+    );
+    let first = sequence_scene_event_hint(
+        Some(&commit),
+        extract_scene_event_hint(
+            "effect_control_changed",
+            &serde_json::json!({"zone_id": "screen", "control_id": "glow"}),
+        ),
+    );
+    let second = sequence_scene_event_hint(
+        Some(&first),
+        extract_scene_event_hint(
+            "effect_control_changed",
+            &serde_json::json!({"zone_id": "screen", "control_id": "speed"}),
+        ),
+    );
+    assert_eq!(second.scene_generation, before.scene_generation + 1);
+    assert_eq!(second.control_generations.get("screen"), Some(&1));
+    assert_eq!(second.structural_generation, before.structural_generation);
+    assert!(!scene_event_requires_effect_refresh(
+        Some(&before),
+        &second,
+        Some("primary")
+    ));
+    assert!(scene_event_requires_effect_refresh(
+        Some(&before),
+        &second,
+        Some("screen")
+    ));
+}
+
+#[test]
+fn the_zone_commit_refreshes_primary_controls_without_per_control_notifications() {
+    let commit = sequence_scene_event_hint(
+        None,
+        extract_scene_event_hint(
+            "zone_changed",
+            &serde_json::json!({"zone_id": "primary", "kind": "controls_patched"}),
+        ),
+    );
+    assert_eq!(commit.scene_generation, 1);
+    assert!(scene_event_requires_effect_refresh(
+        None,
+        &commit,
+        Some("primary")
+    ));
+    assert!(!scene_event_requires_effect_refresh(
+        None,
+        &commit,
+        Some("screen")
+    ));
+}
+
+#[test]
+fn batched_control_hints_preserve_primary_and_structural_invalidations() {
+    let before = sequence_scene_event_hint(
+        None,
+        extract_scene_event_hint(
+            "active_scene_changed",
+            &serde_json::json!({"current": "scene-1"}),
+        ),
+    );
+    let primary = sequence_scene_event_hint(
+        Some(&before),
+        extract_scene_event_hint(
+            "zone_changed",
+            &serde_json::json!({"zone_id": "primary", "kind": "controls_patched"}),
+        ),
+    );
+    let screen = sequence_scene_event_hint(
+        Some(&primary),
+        extract_scene_event_hint(
+            "effect_control_changed",
+            &serde_json::json!({"zone_id": "screen"}),
+        ),
+    );
+    assert!(scene_event_requires_effect_refresh(
+        Some(&before),
+        &screen,
+        Some("primary")
+    ));
+
+    let structural = sequence_scene_event_hint(
+        Some(&screen),
+        extract_scene_event_hint(
+            "zone_changed",
+            &serde_json::json!({"zone_id": "primary", "role": "primary", "kind": "updated"}),
+        ),
+    );
+    let later_control = sequence_scene_event_hint(
+        Some(&structural),
+        extract_scene_event_hint(
+            "effect_control_changed",
+            &serde_json::json!({"zone_id": "screen"}),
+        ),
+    );
+    assert_eq!(
+        later_control.structural_generation,
+        screen.structural_generation + 1
+    );
+    assert!(scene_event_requires_effect_refresh(
+        Some(&screen),
+        &later_control,
+        Some("primary")
+    ));
+
+    let activated = sequence_scene_event_hint(
+        Some(&later_control),
+        extract_scene_event_hint(
+            "active_scene_changed",
+            &serde_json::json!({"current": "scene-2"}),
+        ),
+    );
+    assert!(activated.control_generations.is_empty());
+    assert!(scene_event_requires_effect_refresh(
+        Some(&later_control),
+        &activated,
+        Some("primary")
+    ));
 }
 
 #[test]
diff --git a/e2e/tests/studio-controls.spec.mjs b/e2e/tests/studio-controls.spec.mjs
new file mode 100644
index 000000000..ea482da0f
--- /dev/null
+++ b/e2e/tests/studio-controls.spec.mjs
@@ -0,0 +1,262 @@
+import { test, expect } from "@playwright/test";
+
+import { getStack } from "./helpers.mjs";
+
+const ZONE = "22222222-2222-4222-8222-222222222222";
+const EFFECT = "44444444-4444-4444-8444-444444444444";
+const LAYER = "55555555-5555-4555-8555-555555555555";
+const replacementId = (revision) => `55555555-5555-4555-8555-${String(revision).padStart(12, "0")}`;
+const float = (value) => ({ kind: "float", value });
+
+async function openControls(page, { rejectControls = false } = {}) {
+  const zone = (id, name, role, layers = []) => ({
+    id, name, role, enabled: true, brightness: 1,
+    members: [], layout: { placements: [] }, layers,
+  });
+  const scene = {
+    id: "33333333-3333-4333-8333-333333333333",
+    name: "Layer controls fixture", kind: "named", is_default: false, revision: 42,
+    zones: [
+      zone("11111111-1111-4111-8111-111111111111", "Primary lights", "primary", [{
+        id: "77777777-7777-4777-8777-777777777777", name: "Primary effect layer",
+        source: { type: "effect", effect_id: "88888888-8888-4888-8888-888888888888", controls: {} },
+      }]),
+      zone(ZONE, "Control lights", "custom", [{
+        id: LAYER, name: "Fixture layer", opacity: 1, blend: "replace",
+        source: { type: "effect", effect_id: EFFECT, controls: {
+          upper: float(0.2), lower: float(0.4),
+        } },
+      }]),
+    ],
+  };
+  let socket;
+  const reads = [];
+  const writes = [];
+  const unexpectedWrites = [];
+  const envelope = (data) => ({ data, meta: {
+    api_version: "v1", request_id: "req_controls_fixture", timestamp: "2026-09-09T00:00:00Z",
+  } });
+  const sendEvent = (event, data) => socket.send(JSON.stringify({ type: "event", event, data }));
+  const controlEvent = (controlId, value, oldValue = 0.4) => sendEvent("effect_control_changed", {
+    effect_id: scene.zones[1].layers[0].source.effect_id,
+    zone_id: ZONE, layer_id: scene.zones[1].layers[0].id,
+    control_id: controlId, old_value: float(oldValue), new_value: float(value), trigger: "api",
+  });
+  await page.setViewportSize({ width: 1440, height: 800 });
+  await page.routeWebSocket(/\/api\/v1\/ws(?:\?|$)/, (route) => { socket = route; });
+  await page.route("**/api/v1/**", async (route) => {
+    const request = route.request();
+    const pathname = new URL(request.url()).pathname;
+    if (["GET", "HEAD"].includes(request.method())) {
+      reads.push(pathname);
+      if (pathname === "/api/v1/scene") {
+        await route.fulfill({ json: envelope(scene) });
+        return;
+      }
+      if (pathname.startsWith("/api/v1/effects/") && !pathname.endsWith("/active")) {
+        const id = pathname.split("/").at(-1);
+        await route.fulfill({ json: envelope({
+          id, name: "Fixture effect", description: "Scrollable effect controls", author: "Hypercolor tests",
+          category: "ambient", source: "native", runnable: true, tags: [], version: "1.0.0",
+          audio_reactive: false,
+          controls: ["upper", ...Array.from({ length: 18 }, (_, i) => `middle${i}`), "lower"]
+            .map((id) => ({ id, name: `Fixture ${id}`, control_type: "slider",
+              default_value: float(0.2), min: 0, max: 1, step: 0.01 })),
+        }) });
+        return;
+      }
+      await route.continue();
+      return;
+    }
+    const layerPath = `/api/v1/scene/zones/${ZONE}/layers/${scene.zones[1].layers[0].id}`;
+    const body = request.postDataJSON();
+    writes.push({ method: request.method(), pathname, body, revision: request.headers()["if-match"] });
+    if (request.method() === "PATCH" && pathname === `${layerPath}/controls`) {
+      if (rejectControls) {
+        await route.fulfill({ status: 400, json: { error: { code: "invalid_control", message: "Fixture rejects this value" } } });
+        return;
+      }
+      Object.assign(scene.zones[1].layers[0].source.controls, body.values);
+      scene.revision += 1;
+      await route.fulfill({ json: envelope(scene.zones[1]) });
+      sendEvent("zone_changed", { scene_id: scene.id, zone_id: ZONE, role: "custom", kind: "controls_patched" });
+      for (const [id, value] of Object.entries(body.values)) controlEvent(id, value.value);
+      return;
+    }
+    if (request.method() === "PUT" && pathname === layerPath) {
+      if (request.headers()["if-match"] !== String(scene.revision)) {
+        await route.fulfill({ status: 412, json: { error: { code: "stale_revision", message: "Stale revision" } } });
+        return;
+      }
+      scene.revision += 1;
+      scene.zones[1].layers[0] = { ...body, id: replacementId(scene.revision) };
+      await route.fulfill({ json: envelope(scene.zones[1]) });
+      sendEvent("zone_changed", { scene_id: scene.id, zone_id: ZONE, role: "custom", kind: "updated" });
+      return;
+    }
+    unexpectedWrites.push(`${request.method()} ${pathname}`);
+    await route.abort("blockedbyclient");
+  });
+  await page.goto(`${getStack().appOrigin}/studio`, { waitUntil: "networkidle" });
+  await expect.poll(() => Boolean(socket)).toBe(true);
+  await page.getByTitle("Open the composition panel", { exact: true }).click();
+  await page.getByRole("button", { name: "Control lights 0 devices", exact: true }).click();
+  const inspector = page.getByRole("complementary");
+  const control = (name) => inspector.locator(`div:has(> label:text-is("Fixture ${name}")) > input[type="range"]`);
+  await expect(control("lower")).toHaveValue("0.4");
+  await page.waitForLoadState("networkidle");
+  return { scene, inspector, control, reads, writes, unexpectedWrites, controlEvent, sendEvent };
+}
+
+async function settle(page) {
+  await page.waitForLoadState("networkidle");
+  await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))));
+}
+
+async function scrollState(input) {
+  return input.evaluate((element) => {
+    const scrollers = [];
+    for (let parent = element.parentElement; parent; parent = parent.parentElement) {
+      if (parent.scrollHeight > parent.clientHeight && /auto|scroll/.test(getComputedStyle(parent).overflowY)) {
+        scrollers.push(parent.scrollTop);
+      }
+    }
+    return scrollers;
+  });
+}
+
+test("Studio control edits and remote snapshots preserve the scrolled, focused widget", async ({ page }) => {
+  const fixture = await openControls(page);
+  const lower = fixture.control("lower");
+  await lower.scrollIntoViewIfNeeded();
+  await lower.focus();
+  const original = await lower.elementHandle();
+  const beforeScroll = await scrollState(lower);
+  expect(beforeScroll.some((offset) => offset > 100)).toBe(true);
+  const beforeReads = fixture.reads.length;
+  await lower.press("ArrowRight");
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  await settle(page);
+  expect(fixture.writes[0].body.values.lower.value).toBeCloseTo(0.41, 6);
+  expect(await original.evaluate((element) => element.isConnected && document.activeElement === element)).toBe(true);
+  expect(await scrollState(lower)).toEqual(beforeScroll);
+  const editReads = fixture.reads.slice(beforeReads);
+  expect(editReads.filter((path) => path.startsWith("/api/v1/effects/"))).toEqual([]);
+  expect(editReads.filter((path) => path === "/api/v1/scene").length).toBeLessThanOrEqual(1);
+
+  // Another client changes the control while this inspector stays selected.
+  fixture.scene.zones[1].layers[0].source.controls.lower = float(0.73);
+  fixture.scene.revision += 1;
+  fixture.sendEvent("zone_changed", { scene_id: fixture.scene.id, zone_id: ZONE, role: "custom", kind: "controls_patched" });
+  fixture.controlEvent("lower", 0.73, 0.41);
+  await expect(lower).toHaveValue("0.73");
+  await settle(page);
+  expect(await original.evaluate((element) => element.isConnected && document.activeElement === element)).toBe(true);
+  expect(await scrollState(lower)).toEqual(beforeScroll);
+  expect(fixture.unexpectedWrites).toEqual([]);
+});
+
+test("Studio layer edits retain current controls and use each replacement's revision and identity", async ({ page }) => {
+  const fixture = await openControls(page);
+  // A refreshed snapshot changes both control data and revision before a
+  // compositing edit. The subsequent PUT must preserve those remote values.
+  fixture.scene.zones[1].layers[0].source.controls.lower = float(0.81);
+  fixture.scene.revision = 47;
+  fixture.sendEvent("zone_changed", { scene_id: fixture.scene.id, zone_id: ZONE, role: "custom", kind: "controls_patched" });
+  fixture.controlEvent("lower", 0.81);
+  await expect(fixture.control("lower")).toHaveValue("0.81");
+  await fixture.control("lower").scrollIntoViewIfNeeded();
+  const beforeScroll = await scrollState(fixture.control("lower"));
+  expect(beforeScroll.some((offset) => offset > 100)).toBe(true);
+  const opacity = fixture.inspector.locator("article input[type=range]").first();
+  await opacity.evaluate((element) => {
+    element.value = "0.5";
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  await settle(page);
+  expect(fixture.writes[0].revision).toBe("47");
+  expect(fixture.writes[0].body.source.controls.lower.value).toBeCloseTo(0.81, 6);
+  await expect(opacity).toHaveValue("0.5");
+  expect(await scrollState(fixture.control("lower"))).toEqual(beforeScroll);
+  const blend = fixture.inspector.locator("article").getByRole("button", { name: "Replace", exact: true });
+  await blend.scrollIntoViewIfNeeded();
+  await settle(page);
+  await blend.click();
+  await page.getByRole("option", { name: "Add", exact: true }).click();
+  await expect.poll(() => fixture.writes.length).toBe(2);
+  await settle(page);
+  expect(fixture.writes[1].revision).toBe("48");
+  expect(fixture.writes[1].pathname).toContain(replacementId(48));
+  expect(fixture.writes[1].body.opacity).toBe(0.5);
+  expect(fixture.writes[1].body.source.controls.lower.value).toBeCloseTo(0.81, 6);
+  await expect(fixture.inspector.locator("article").getByRole("button", { name: "Add", exact: true })).toBeVisible();
+  expect(fixture.unexpectedWrites).toEqual([]);
+});
+
+test("Studio source replacement retargets effect controls to the new layer", async ({ page }) => {
+  const fixture = await openControls(page);
+  const oldControl = await fixture.control("lower").elementHandle();
+  const nextEffect = "66666666-6666-4666-8666-666666666666";
+  fixture.scene.revision += 1;
+  fixture.scene.zones[1].layers[0] = {
+    ...fixture.scene.zones[1].layers[0],
+    id: replacementId(fixture.scene.revision),
+    source: { type: "effect", effect_id: nextEffect, controls: { lower: float(0.6) } },
+  };
+  fixture.sendEvent("zone_changed", {
+    scene_id: fixture.scene.id, zone_id: ZONE, role: "custom", kind: "updated",
+  });
+  await expect(fixture.control("lower")).toHaveValue("0.6");
+  expect(await oldControl.evaluate((element) => element.isConnected)).toBe(false);
+  expect(fixture.reads).toContain(`/api/v1/effects/${nextEffect}`);
+  await fixture.control("lower").focus();
+  await fixture.control("lower").press("ArrowRight");
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  expect(fixture.writes[0].pathname).toBe(`/api/v1/scene/zones/${ZONE}/layers/${replacementId(43)}/controls`);
+  expect(fixture.writes[0].body.values.lower.value).toBeCloseTo(0.61, 6);
+  expect(fixture.unexpectedWrites).toEqual([]);
+});
+
+test("Studio rejected control edits restore the canonical value without remounting", async ({ page }) => {
+  const fixture = await openControls(page, { rejectControls: true });
+  const lower = fixture.control("lower");
+  await lower.scrollIntoViewIfNeeded();
+  await lower.focus();
+  const original = await lower.elementHandle();
+  const beforeScroll = await scrollState(lower);
+  await lower.press("ArrowRight");
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  await expect(lower).toHaveValue("0.4");
+  await settle(page);
+  expect(fixture.scene.zones[1].layers[0].source.controls.lower).toEqual(float(0.4));
+  expect(await original.evaluate((element) => element.isConnected && document.activeElement === element)).toBe(true);
+  expect(await scrollState(lower)).toEqual(beforeScroll);
+  expect(fixture.unexpectedWrites).toEqual([]);
+});
+
+test("Studio advanced layer edits keep the disclosure open and preserve scrolling", async ({ page }) => {
+  const fixture = await openControls(page);
+  const disclosure = fixture.inspector.locator("article details");
+  await disclosure.locator("summary").click();
+  const scaleY = disclosure.locator('label:has(> span:text-is("Scale Y")) > input[type="range"]');
+  await scaleY.scrollIntoViewIfNeeded();
+  await expect.poll(async () => Number(await scaleY.inputValue())).toBe(1);
+  const beforeScroll = await scrollState(scaleY);
+  expect(beforeScroll.some((offset) => offset > 100)).toBe(true);
+  const beforeReads = fixture.reads.length;
+  await scaleY.evaluate((element) => {
+    element.value = "1.5";
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+  await expect.poll(() => fixture.writes.length).toBe(1);
+  await settle(page);
+  expect(fixture.writes[0].revision).toBe("42");
+  expect(fixture.writes[0].body.transform.scale).toEqual([1, 1.5]);
+  expect(fixture.scene.zones[1].layers[0].id).toBe(replacementId(43));
+  await expect(disclosure).toHaveAttribute("open", "");
+  await expect.poll(async () => Number(await scaleY.inputValue())).toBe(1.5);
+  expect(await scrollState(scaleY)).toEqual(beforeScroll);
+  expect(fixture.reads.slice(beforeReads).filter((path) => path === `/api/v1/effects/${EFFECT}`)).toEqual([]);
+  expect(fixture.unexpectedWrites).toEqual([]);
+});