In a Human+ app, multiple agents and users work in parallel across different application surfaces. Without a coordinated registry, agents cannot discover which screens exist, target them by stable identity, introspect their state, or render agent-emitted JSON UIs. Trying to glue this together from ad-hoc global singletons or context providers leads to race conditions, unmounted surfaces that linger in memory, and agents that resort to DOM scraping.

<Screen.System> is a React context provider that owns a global Map&-based registry of mounted <Screen> surfaces, a parallel Map of Zustand stores keyed by ${screenId}.${storeName}, and mutable lifecycle and agent-presence metadata for each screen. It exposes registerScreen, updateScreen, unregisterScreen, and registerStore methods; the context value is queried via useScreenSystem() and drives re-renders when the registry changes via a version counter.

Import Screen from @particle-academy/fancy-screens, wrap your app root in <Screen.System> once, then drop <Screen id="name"> surfaces inside. Screens self-register on mount and clean up on unmount. Call useScreens() from anywhere to get a snapshot of all mounted screens and their registered Zustand stores—agents can introspect and mutate state without prop drilling or DOM scraping, and the system broadcasts presence updates (agent focus, color) via agentActivity patches that the Screen component renders as CSS classes.