feat(web): themed sidebar header art for nightly and dev builds

[maria-rcks]

What Changed

Adds decorative SVG backdrops behind the sidebar header, gated on the build channel:

• Nightly: night sky matching the nightly app icon palette (navy→indigo→purple gradient, small twinkling stars, drifting blurred clouds).
• Dev: blueprint paper matching the dev app icon (blue gradient, minor/major grid, ruler ticks, dashed dimension lines, crosshair marks, compass circle) with a darker navy palette in dark mode.

Details:

• New SidebarStageBackdrop component with resolveSidebarStageBackdropVariant(stageLabel) and a useSidebarStageBackdropVariant() hook (reuses the existing server-backed stage-label resolution).
• The art blends into the sidebar by painting var(--card) over its bottom with an eased gradient (::after) plus a soft alpha mask, so it fully resolves before the first nav item in both themes.
• Wordmark, stage pill, and sidebar-toggle button switch to light-on-art styling when a backdrop is active.
• Idle animations are duty-cycled (stepped keyframes with long holds) per the repo's animation conventions and disabled under prefers-reduced-motion.
• Stable builds (Alpha/Latest) are unaffected — no backdrop is rendered.

Why

Gives the dev and nightly channels distinct, polished visual identities in the app itself, consistent with their per-channel app icons.

UI Changes

Before/after, dev + nightly × dark + light × settings + threads sidebar:

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Low Risk
Presentation-only sidebar chrome and CSS; no changes to auth, data, or core navigation behavior.

Overview
Adds channel-specific decorative header art behind the sidebar for nightly and dev builds only; stable channels render no backdrop.

A new SidebarStageBackdrop maps the server-backed stage label to nightly or dev and paints wide SVG scenes (night sky vs blueprint grid) in the header. index.css fades the art into --app-chrome-background via a mask and gradient overlay, with separate dev blueprint tokens for dark mode.

When a backdrop is active, the sidebar header brand, stage pill, mobile trigger, and the fixed workspace sidebar toggle switch to light-on-art styling so controls stay readable over the illustration.

^{Reviewed by Cursor Bugbot for commit fc97066. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Add themed SVG backdrop art to the sidebar header for nightly and dev builds

• Adds a new SidebarStageBackdrop component that renders stage-specific SVG art (a night sky for nightly, a blueprint grid for dev) behind the sidebar header.
• A resolveSidebarStageBackdropVariant function and useSidebarStageBackdropVariant hook map the server-backed app stage label to the correct variant, returning null for production.
• The sidebar header and toggle button switch to white-toned text and hover styles when a backdrop is active; the T3Wordmark SVG now inherits color from its parent instead of using a fixed text-foreground class.
• CSS in index.css blends the backdrop into the sidebar background via a mask gradient and provides light/dark CSS variable palettes for the blueprint variant.

^{Macroscope summarized fc97066.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: c126819a-0a2d-4cd7-a0cc-14bcf7760ae1

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit d64997b. Configure here.}

[macroscopeapp]

Approvability

Verdict: Approved

Purely decorative visual enhancement adding themed SVG backgrounds to the sidebar header for nightly/dev builds only. The changes are self-contained, non-interactive (aria-hidden, pointer-events-none), and don't affect production builds or any runtime behavior beyond appearance.

^{You can customize Macroscope's approvability policy. Learn more.}

Dismissing prior approval to re-evaluate 485956c

[bzbetty]

finding the transition from the sidebar to content window really messes with my head after this change. Feels like 2 separate windows and I have an urge to click the maximize button on the right hand side because of it.

Not opposed to the idea of header art, but wondering if it needs to be full window width and thus shorter.

eg