import { useAtomValue } from "@effect/atom-react";import {  connectionCatalogDisplayUrl,  type EnvironmentPresentation as BaseEnvironmentPresentation,} from "@t3tools/client-runtime/connection";import type { EnvironmentId } from "@t3tools/contracts";import { useMemo } from "react"; import { environmentCatalog } from "../connection/catalog";import { environmentPresentations } from "./presentation";import { useEnvironmentQuery } from "./query"; export interface EnvironmentPresentation extends BaseEnvironmentPresentation {  readonly environmentId: EnvironmentId;  readonly label: string;  readonly displayUrl: string | null;  readonly relayManaged: boolean;} export function projectEnvironmentPresentation(  environmentId: EnvironmentId,  presentation: BaseEnvironmentPresentation,): EnvironmentPresentation {  return {    ...presentation,    environmentId,    label: presentation.entry.target.label,    displayUrl: connectionCatalogDisplayUrl(presentation.entry),    relayManaged: presentation.entry.target._tag === "RelayConnectionTarget",  };} export function useEnvironments() {  const catalog = useAtomValue(environmentCatalog.catalogValueAtom);  const networkStatus = useAtomValue(environmentCatalog.networkStatusValueAtom);  const presentationById = useAtomValue(environmentPresentations.presentationsAtom);   const environments = useMemo(    () =>      [...presentationById.entries()].map(([environmentId, presentation]) =>        projectEnvironmentPresentation(environmentId, presentation),      ),    [presentationById],  );   return {    isReady: catalog.isReady,    networkStatus,    environments,    presentationById,  };} export function useEnvironmentConnectionState(environmentId: EnvironmentId) {  return useEnvironmentQuery(environmentCatalog.stateAtom(environmentId));}