Allow users to view workflow editor when disconnected from server

[midigofrank]

Description

Fixes the "loading workflow screen of death" issue where users experienced infinite loading spinners when the WebSocket disconnected. This PR enables graceful degradation by preserving offline workflow state and allowing offline editing with automatic sync on reconnection.

Key Changes

1. Graceful Disconnection Handling (commit 219a065)

• LoadingBoundary: Allow rendering with cached workflow data when disconnected
• useWorkflowReadOnly: Add connection state check to enable read-only mode during disconnection
• SessionProvider: Track reconnection state and reinitialize session properly
• createSessionStore: Clean up existing provider before reinitializing
• Display read-only banner with appropriate tooltips when disconnected

2. Offline Editing Support (commit d601b42)

• Preserve Y.Doc across disconnections instead of destroying it
• Separate initialization and cleanup effects in SessionProvider
• Enable Monaco editor during offline periods (no longer read-only)
• Changes made offline are automatically synced when connection is restored

3. Architecture Improvements (commit dca56c4)

• Extract useProviderLifecycle hook for provider creation/reconnection management
• Add useYDocPersistence hook for Y.Doc lifecycle management (created once, only destroyed on unmount)
• Create ConnectionStatusContext to expose connection state to components
• Improve separation of concerns in SessionProvider
• Track sync state and last sync time for better connection visibility

How It Works

The implementation uses Y.js CRDTs (Conflict-free Replicated Data Types) which automatically handle offline editing:

1. During connection: Y.Doc syncs changes via PhoenixChannelProvider
2. On disconnect: Y.Doc persists in memory, provider is destroyed
3. Offline editing: Changes accumulate in Y.Doc locally
4. On reconnect: New provider is created, Y.Doc automatically syncs all offline changes
5. Conflict resolution: Y.js CRDT algorithm merges changes from all users automatically

Closes #3972

Validation steps

Test 1: Offline Editing and Sync

1. Open the collaborative editor on a workflow
2. Make a change to job code (e.g., add a comment)
3. Stop the Phoenix server: Ctrl+C in your server terminal
4. You should see the workflow diagram remain visible (no loading spinner)
5. Make additional changes to the job code while offline
6. Restart the server: iex -S mix phx.server
7. Wait for reconnection (watch browser console logs)
8. Verify all offline changes were synced to the server
9. Open the workflow in another browser/tab to confirm changes are persisted

Test 2: Concurrent Offline Editing (Conflict Resolution)

1. Open the same workflow in two different browsers (Browser A and Browser B)
2. Stop the Phoenix server
3. In Browser A: Edit job 1's code
4. In Browser B: Edit job 2's code (different job)
5. Restart the server
6. Verify both browsers reconnect and both changes are preserved
7. Open a third browser - both changes should be visible

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. (e.g., :owner, :admin, :editor, :viewer)
• 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.83%. Comparing base (14819c9) to head (834965d).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4012      +/-   ##
==========================================
- Coverage   88.84%   88.83%   -0.02%     
==========================================
  Files         422      422              
  Lines       19118    19118              
==========================================
- Hits        16985    16983       -2     
- Misses       2133     2135       +2     

☔ 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.

[taylordowns2000]

Hey @midigofrank , quick Qs before a full review:

1. Why must the workflow be read only? Isn't the idea of this yDoc/collaborative editor that I can make changes and have those changes pushed to the web once my connection is restored?
2. I still get the loading screen with low/intermittent connectivity on the IDE. Can that be handled in the same way?

[midigofrank]

Hey @taylordowns2000 ,

Re 1: Yes it's possible, it just requires a little more work. The current setup overwrites the changes in the store with the server changes. Maybe this should be the next step

Re 2: Great catch! Let me fix that

[midigofrank]

Hey @taylordowns2000 ,

Re 1: Yes it's possible, it just requires a little more work. The current setup overwrites the changes in the store with the server changes. Maybe this should be the next step

Re 2: Great catch! Let me fix that

@stuartc says that they should merge and not overwrite. Let me do a diagnosis on what it would take to make that possible

[midigofrank]

Hey @taylordowns2000 would you mind testing this out again.

@stuartc by the way, the mix.lock changes came about because I updated tidewave

[taylordowns2000]

does what it says on the tin. please until @stuartc gives a 👍 to merge.

@midigofrank , have you already created an issue for merging? (my review question 1) if not, please do so

[midigofrank]

@taylordowns2000 the latest commit merges the changes

[stuartc]

A couple of things, I've thrown over a bunch of notes. There is some weird behaviour when switching to latest from a version, more easily noticed when you have two browsers open. It's like you're both on latest and also not :/