Handle offline mode in the agentic UI

[katinthehatsite]

Related issues

Fixes STU-2060

How AI was used in this PR

It helped to identify and implement relevant changes.

Proposed Changes

This PR handles offline mode in the agentic UI:

• when the user is offline, they are redirected from the chat to site settings with the banner displayed:

• the actions that require connectivity such as Share or Publish are disabled and have relevant description:

Testing Instructions

• Pull the changes from this branch
• Start Studio with agentic UI
• Disable your internet connections and confirm that you are brought from the chat to the site settings
• Confirm that actions that require an internet connection are disabled

Pre-merge Checklist

• Have you checked for TypeScript, React or other console errors?

[wpmobilebot]

📊 Performance Test Results

Comparing 00f8ed8 vs trunk

app-size

Metric	trunk	00f8ed8	Diff	Change
App Size (Mac)	1355.67 MB	1355.58 MB	0.09 MB	⚪ 0.0%

site-editor

Metric	trunk	00f8ed8	Diff	Change
load	1085 ms	1036 ms	49 ms	⚪ 0.0%

site-startup

Metric	trunk	00f8ed8	Diff	Change
siteCreation	7020 ms	6995 ms	25 ms	⚪ 0.0%
siteStartup	2350 ms	2365 ms	+15 ms	⚪ 0.0%

---

Results are median values from multiple test runs.

Legend: 🟢 Improvement (faster) | 🔴 Regression (slower) | ⚪ No change (<50ms diff)

[bcotrim]

In the exploration design, although we don't have the behavior for offline, we do for logged-out experience, and we could apply a similar UI.

Light	Dark

My suggestion for this PR is to:

• Create the new Overview tab - just the tab title and the offline banner, we can add the rest of the content in follow-up PR
• Adjust the banner layout and text to match the logged-out one, keeping your suggestion of a "warning-like" style
• Keep the redirect behavior, it matches exactly what it is done in the exploration design

Behavior wise, I am still able to push, pull and update preview while offline, if those were already connected before going offline.

[katinthehatsite]

@bcotrim I have made some more changes - feel free to review and modify whatever you think is necessary. Initially, I thought about using the separate tab but I did not find that it worked nice so I ended up adding the banner to the site settings tab. I will be AFK next week but feel free to take over and make further changes

[bcotrim]

@sejas @nightnei I picked up this PR from @katinthehatsite and made some adjustments.
Could you give it another review, please? 🙇

[sejas]

I tested it holistically, and I didn’t notice anything missing. Left a suggestion.

offline-mode.mp4

Instead of the yellow warning in site settings I observed a gray one only in the overview tab.

Overview	General

[sejas]

Nit. We could use useSyncExternalStore, and avoid using useState.

Suggested change

	import { useEffect, useState } from 'react';
	export function useOffline(): boolean {
	const [ isOffline, setIsOffline ] = useState( ! navigator.onLine );
	useEffect( () => {
	const update = () => setIsOffline( ! navigator.onLine );
	window.addEventListener( 'online', update );
	window.addEventListener( 'offline', update );
	return () => {
	window.removeEventListener( 'online', update );
	window.removeEventListener( 'offline', update );
	};
	}, [] );
	return isOffline;
	}
	import { useSyncExternalStore } from 'react';
	function subscribe( callback: () => void ) {
	window.addEventListener( 'online', callback );
	window.addEventListener( 'offline', callback );
	return () => {
	window.removeEventListener( 'online', callback );
	window.removeEventListener( 'offline', callback );
	};
	}
	export function useOffline(): boolean {
	return useSyncExternalStore( subscribe, () => ! navigator.onLine );
	}