clean up relay info

index.html

···
       window.slingshot = window.SimpleQuery('https://slingshot.microcosm.blue');
       window.relays = [
         {
-          name: 'Bluesky sync1.1 East',
-          hostname: 'relay1.us-east.bsky.network',
-        },
-        {
-          name: 'Bluesky sync1.1 West',
-          hostname: 'relay1.us-west.bsky.network',
+          name: 'Bluesky',
+          icon: 'https://web-cdn.bsky.app/static/apple-touch-icon.png',
+          hostname: 'bsky.network',
+          note: 'current',
+          missingApis: {
+            ['com.atproto.sync.getHostStatus']: 'missing API (old relay code)',
+            ['com.atproto.sync.getRepoStatus']: 'missing API (old relay code)',
+          },
         },
         {
           name: 'Microcosm Montreal',
···
           hostname: 'relay3.fr.hose.cam',
         },
         {
-          name: 'Bluesky prod (old)',
-          hostname: 'bsky.network',
+          name: 'Upcloud',
+          icon: 'https://upcloud.com/media/android-chrome-512x512-2-150x150.png',
+          hostname: 'relay.upcloud.world',
         },
         {
-          name: 'Blacksky (partial xrpc)',
+          name: 'Blacksky',
+          icon: 'https://blacksky.community/static/favicon-32x32.png',
           hostname: 'atproto.africa',
+          missingApis: {
+            ['com.atproto.sync.getHostStatus']: 'API not yet deployed',
+            ['com.atproto.sync.getRepoStatus']: 'API not implemented',
+          },
+        },
+        {
+          name: 'Bluesky East',
+          icon: 'https://web-cdn.bsky.app/static/favicon-32x32.png',
+          note: 'future',
+          hostname: 'relay1.us-east.bsky.network',
         },
         {
-          name: 'Upcloud (no CORS)',
-          hostname: 'relay.upcloud.world',
+          name: 'Bluesky West',
+          icon: 'https://web-cdn.bsky.app/static/favicon-32x32.png',
+          note: 'future',
+          hostname: 'relay1.us-west.bsky.network',
         },
       ];
     </script>
···
           loading: false,
           error: null,
           status: null,
+          expectedErrorInfo: null,
           reqCrawlStatus: null,
           reqCrawlError: null,
 
···
             this.loading = true;
             this.error = null;
             this.status = null;
+            this.expectedError = false;
             const query = window.SimpleQuery(`https://${relay.hostname}`);
             const hostname = pds.split('://')[1];
             let data;
···
               });
               this.status = data.status;
             } catch(e) {
-              if (window.isXrpcErr(e)) {
+              if (relay.missingApis['com.atproto.sync.getHostStatus']) {
+                this.error = 'Can\'t check';
+                this.expectedErrorInfo = relay.missingApis['com.atproto.sync.getHostStatus'];
+              } else if (window.isXrpcErr(e)) {
                 this.error = e.error;
               } else {
                 this.error = 'Failed to check (see console)';
···
           loading: false,
           error: null,
           status: null,
+          expectedErrorInfo: null,
 
           async init() {
             await this.check(did, relay);
···
             this.loading = true;
             this.error = null;
             this.status = null;
+            this.expectedErrorInfo = null;
 
             const query = window.SimpleQuery(`https://${relay.hostname}`);
             try {
···
                 params: { did },
               });
             } catch(e) {
-              if (window.isXrpcErr(e)) {
+              if (relay.missingApis['com.atproto.sync.getRepoStatus']) {
+                this.error = 'Can\'t check';
+                this.expectedErrorInfo = relay.missingApis['com.atproto.sync.getRepoStatus'];
+              } else if (window.isXrpcErr(e)) {
                 this.error = e.error;
               } else {
                 this.error = 'Failed to check (see console)';
···
               </div>
 
               <h3 class="text-lg mt-3">Relay host status</h3>
-              <div class="overflow-x-auto overflow-y-auto max-h-33">
+              <div class="overflow-x-auto">
                 <table class="table table-xs">
                   <tbody>
                     <template x-for="relay in window.relays">
···
                         x-data="relayCheckHost(pds, relay)"
                         x-init="$watch('pds', pds => check(pds, relay))"
                       >
-                        <td x-text="relay.name" class="text-sm"></td>
+                        <td class="text-sm">
+                          <div class="tooltip tooltip-right" :data-tip="relay.hostname">
+                            <img
+                              class="inline-block h-4 w-4"
+                              :src="relay.icon"
+                              alt=""
+                            />
+                            <span x-text="relay.name"></span>
+                            <span
+                              x-show="!!relay.note"
+                              x-text="relay.note"
+                              class="badge badge-soft badge-neutral badge-xs"
+                            ></span>
+                          </div>
+                        </td>
                         <td>
                           <template x-if="loading">
                             <em>loading&hellip;</em>
                           </template>
                           <template x-if="error">
-                            <span
-                              x-text="error"
-                              class="text-xs text-warning"
-                            ></span>
+                            <div
+                              class="text-xs"
+                              :class="expectedErrorInfo
+                                ? 'text-info tooltip tooltip-left cursor-help'
+                                : 'text-warning'"
+                              :data-tip="expectedErrorInfo"
+                            >
+                              <span x-text="error"></span>
+                              <span
+                                x-show="!!expectedErrorInfo"
+                                class="badge badge-soft badge-info badge-xs"
+                              >i</span>
+                            </div>
                           </template>
                           <template x-if="status">
                             <span
···
                           </template>
                         </td>
                         <td>
-                          <div x-show="status !== 'active'">
+                          <div x-show="status !== 'active' && !expectedErrorInfo">
                             <button
                               x-show="reqCrawlStatus !== 'done'"
                               class="btn btn-xs btn-ghost whitespace-nowrap"
···
                   <h3 class="text-lg mt-3">
                     Relay repo status
                   </h3>
-                  <div class="overflow-x-auto overflow-y-auto max-h-33">
+                  <div class="overflow-x-auto">
                     <table class="table table-xs">
                       <tbody>
                         <template x-for="relay in window.relays">
···
                             x-data="relayCheckRepo(did, relay)"
                             x-init="$watch('pds', pds => check(did, relay))"
                           >
-                            <td x-text="relay.name" class="text-sm"></td>
+                            <td class="text-sm">
+                              <div class="tooltip tooltip-right" :data-tip="relay.hostname">
+                                <img
+                                  class="inline-block h-4 w-4"
+                                  :src="relay.icon"
+                                  alt=""
+                                />
+                                <span x-text="relay.name"></span>
+                                <span
+                                  x-show="!!relay.note"
+                                  x-text="relay.note"
+                                  class="badge badge-neutral badge-soft badge-xs"
+                                ></span>
+                              </div>
+                            </td>
                             <template x-if="loading">
                               <td>
                                 <em>loading&hellip;</em>
                               </td>
                             </template>
                             <template x-if="error">
-                              <td
-                                x-text="error"
-                                class="text-xs text-warning"
-                              ></td>
+                              <td>
+                                <div
+                                  class="text-xs"
+                                  :class="expectedErrorInfo
+                                    ? 'text-info tooltip tooltip-left cursor-help'
+                                    : 'text-warning'"
+                                  :data-tip="expectedErrorInfo"
+                                >
+                                  <span x-text="error"></span>
+                                  <span
+                                    x-show="!!expectedErrorInfo"
+                                    class="badge badge-soft badge-info badge-xs"
+                                  >i</span>
+                                </div>
+                              </td>
                             </template>
                             <template x-if="status">
                               <td>