From 212a10a84f901e0a7b7105f159f91e54d50d968e Mon Sep 17 00:00:00 2001
From: sheehanmunim <sheehanmunim@gmail.com>
Date: Wed, 19 Aug 2026 14:05:23 -0400
Subject: [PATCH] fix(web): draw the artwork the picker chose

The sidebar header resolved its backdrop from the build channel directly, so
picking Night sky or Blueprint changed the setting and nothing appeared: on a
release build the channel resolves to nothing. The header now reads the same
hook the rest of the app does, which honours an explicit pick.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../src/components/SidebarStageBackdrop.test.tsx    | 13 +++++++++++++
 apps/web/src/components/sidebar/SidebarChrome.tsx   |  8 +++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/SidebarStageBackdrop.test.tsx b/apps/web/src/components/SidebarStageBackdrop.test.tsx
index 51c65c7c6f01..75797c10cba0 100644
--- a/apps/web/src/components/SidebarStageBackdrop.test.tsx
+++ b/apps/web/src/components/SidebarStageBackdrop.test.tsx
@@ -127,3 +127,16 @@ describe("named artwork defaults", () => {
     ).toEqual(DEV_BACKDROP);
   });
 });
+
+describe("the header renders what the picker chose", () => {
+  it("resolves a named scene with no help from the build channel", () => {
+    // Regression: the sidebar header called the stage-label resolver directly,
+    // so a picked scene never reached the renderer on a release build.
+    expect(resolveSidebarArtwork({ selection: "night", stageLabel: "", custom: [] })).toEqual(
+      NIGHTLY_BACKDROP,
+    );
+    expect(resolveSidebarArtwork({ selection: "day", stageLabel: "", custom: [] })).toEqual(
+      DEV_BACKDROP,
+    );
+  });
+});
diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index 5d91359ffea6..4be98457130d 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -15,10 +15,10 @@ import { cn } from "../../lib/utils";
 import { useEnvironments } from "../../state/environments";
 import {
   resolveEnvironmentIdentificationPillLabel,
-  resolveSidebarStageBackdropVariant,
   resolveSidebarStageFocusRingOffsetClass,
   SidebarStageBackdrop,
   useEnvironmentStageLabel,
+  useSidebarStageBackdropVariant,
 } from "../SidebarStageBackdrop";
 import { Badge } from "../ui/badge";
 import {
@@ -43,8 +43,10 @@ export const SidebarChromeHeader = memo(function SidebarChromeHeader({
 }) {
   const stageLabel = useEnvironmentStageLabel();
   const environmentIdentificationMode = useEnvironmentIdentificationMode();
-  const backdropVariant = resolveSidebarStageBackdropVariant(
-    stageLabel,
+  // The hook, not the stage-label resolver: this is the header that actually
+  // draws the artwork, and reading the build channel here meant a chosen scene
+  // never appeared on a release build.
+  const backdropVariant = useSidebarStageBackdropVariant(
     environmentIdentificationMode === "artwork",
   );
   const pillLabel =