feat: add sandbox banners to workflow editor

[elias-ba]

Description

This PR implements visual indicators to clearly show when working in a sandbox environment, addressing the critical safety concern identified that users might modify workflows without realizing they're in a dev/prod sandbox.

Closes #3413

Validation steps

1. Test banner in sandbox inspector:

   • Create or navigate to a sandbox project
   • Open a workflow and select a job to open the inspector
   • Verify banner appears with beaker icon and sandbox name in bold
   • Verify banner uses primary theme colors (not yellow)

2. Test env chip display:

   • Open workflow editor (canvas view)
   • Verify env chip appears next to version tag with project’s environment
   • Open job inspector
   • Verify env chip appears next to version tag in inspector header

3. Test banner NOT on canvas:

   • View workflow canvas (no job selected)
   • Verify no banner appears on canvas
   • Only see banner when inspector is open

4. Test deep sandbox hierarchies:

   • Create a 3-level deep hierarchy: Root → Sandbox A → Sandbox B
   • Open workflow editor in Sandbox B and view inspector
   • Verify banner shows “Sandbox B” name (current sandbox)

5. Test non-sandbox projects:

   • Navigate to a root project (no parent)
   • Open workflow editor and inspector
   • Verify no banner appears (only shows in sandboxes)

6. Test both editors:

   • Test in old Phoenix workflow editor
   • Test in collaborative React editor (full-screen IDE)
   • Verify banners appear with consistent styling

Additional notes for the reviewer

AI Usage

Please disclose how you've used AI in this work (it's cool, we just want to know!):

• Code generation (copilot but not intellisense)
• Learning or fact checking
• Strategy / design
• Optimisation / refactoring
• Translation / spellchecking / doc gen
• Other
• I have not used AI

You can read more details in our Responsible AI Policy

Pre-submission checklist

• I have performed a self-review of my code.
• I have implemented and tested all related authorization policies. (N/A - no auth changes, uses existing project access)
• I have updated the changelog.
• I have ticked a box in "AI usage" in this PR

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.79%. Comparing base (8272634) to head (c0e7d55).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3824      +/-   ##
==========================================
+ Coverage   88.66%   88.79%   +0.12%     
==========================================
  Files         421      421              
  Lines       18277    18300      +23     
==========================================
+ Hits        16206    16249      +43     
+ Misses       2071     2051      -20     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[josephjclark]

Thanks for getting this up @elias-ba! Great to see something so we can discuss and think through the details.

How this looks right now:

Here's the inevitable feedback!

• The banner should be the same colour as the sandbox. Use the theme.
• Love the Inspector banner. Instant win.
• I would remove the warning icon from the banner. It's too scary. Use the beaker instead.
• Mixed feelings about switch to. I don't like that it dumps me into Workflows - I've lost all my context. I'd prefer it took me to the same step in main - but of course that's hard to work out.
• Ok I'm voting to drop the link entirely. Having lived the experience of clicking it, I don't think it adds any utility at all.
• I don't like the banner on the Workflow diagram. There are two clues to your context here, in the colour and the breadcrumbs (and one day the widget). Also the History and Settings pages don't show that. So I suggest we drop that too.
• Make the Sandbox name in the logo bold text, just to make it clearer that that's a dynamic value

Also - is it too much to show the current env at the top of the inspector? Alongside the latest version tag? Should I make that a new issue?

[elias-ba]

Hey @josephjclark, I implemented all your feedback on this one. Would you mind having another look and let me know ?

[josephjclark]

Excellent! 🎯