relay checker for your followers

src/App.css

···
 #root {
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
   text-align: center;
 }
 

src/deactivated/AccountInput.tsx

···
+import { useState, useEffect, useCallback } from 'react';
+import { MiniDoc } from './types';
+import { asyncThrottle } from './throttle';
+import { resolveMiniDoc } from './microcosm';
+import LilUser from './LilUser';
+
+function AccountInput({ onSet, children }: {
+  onSet: (MiniDoc) => void,
+  children: any,
+}) {
+  const [identifier, setIdentifier] = useState("");
+  const [foundDoc, setFoundDoc] = useState(null);
+  const [triedSubmitAt, setTriedSubmitAt] = useState(null);
+
+  const lookup = useCallback(asyncThrottle(300, resolveMiniDoc, setFoundDoc), []);
+
+  const handleIdChange = useCallback(e => {
+    setIdentifier(e.target.value);
+    lookup(e.target.value);
+  });
+
+  const handleSubmit = useCallback(() => {
+    if (foundDoc) {
+      onSet(foundDoc);
+    } else {
+      setTriedSubmitAt(+new Date());
+    }
+  });
+
+  useEffect(() => {
+    if (!triedSubmitAt) return;
+    if (!foundDoc) return;
+    if (new Date() - triedSubmitAt > 500) return;
+    onSet(foundDoc);
+  }, [foundDoc, triedSubmitAt])
+
+  return (
+    <form
+      style={{
+        maxWidth: "420px",
+        margin: "0 auto",
+        display: "block",
+      }}
+      onSubmit={handleSubmit}
+    >
+      <label style={{
+        display: "block",
+      }}>
+        Your handle or DID:{' '}
+        <input
+          style={{
+            margin: "0.5em 0",
+            padding: "0.3em 0.5em",
+            font: "inherit",
+            borderRadius: "0.3em",
+            border: "1px solid #444"
+          }}
+          placeholder="bad-example.com"
+          value={identifier}
+          onChange={handleIdChange}
+        />
+      </label>
+      {foundDoc
+        ? <LilUser doc={foundDoc}>
+            <button onClick={() => onSet(foundDoc)}>check</button>
+          </LilUser>
+        : <br/>
+      }
+    </form>
+  )
+}
+
+
+export default AccountInput;

src/deactivated/CheckFollowers.tsx

···
+import { useState, useCallback, useEffect } from 'react';
+import { MiniDoc, Collection, Did } from './types';
+import { listRecords, resolveMiniDoc, getRepoStatus } from './microcosm';
+import LilUser from './LilUser';
+import knownRelays from '../knownRelays.json';
+
+const INCLUDED_RELAYS = [
+  // most relays don't send cors headers rn
+  'wss://relay.xero.systems',
+  'wss://relay1.us-east.bsky.network',
+  'wss://relay1.us-west.bsky.network',
+
+  // these relays are ineligible for other reasons:
+  // 'wss://atproto.africa', // rsky-relay does not implement getRepoStatus (and doesn't have this bug)
+  // 'wss://bsky.network', // old bgs codes does not have getRepoStatus
+];
+
+
+async function checkRelayStatuses(repo: Did) {
+  const deactivateds = [];
+  const missings = [];
+  const fails = [];
+  for (const url of INCLUDED_RELAYS) {
+    const u = new URL(url);
+    u.protocol = u.protocol.replace('ws', 'http');
+    let repoStatus;
+    try {
+      repoStatus = await getRepoStatus(u, repo);
+    } catch (e) {}
+    if (repoStatus === 'notfound') {
+      missings.push(u.hostname);
+      continue;
+    }
+    if (!repoStatus) {
+      fails.push(u.hostname);
+      continue;
+    }
+    if (!repoStatus.active) {
+      console.log('rs', repoStatus);
+      deactivateds.push(u.hostname);
+    }
+  }
+  return { deactivateds, missings, fails };
+}
+
+function FailSummary({ oof, children }) {
+  const badRelays = {};
+  const { deactivateds, missings, fails } = oof;
+
+  deactivateds.forEach(u => badRelays[u] = 'deactivated');
+  missings.forEach(u => badRelays[u] = 'not crawling');
+  fails.forEach(u => badRelays[u] = 'check failed');
+
+  return (
+    <p style={{ fontSize: '0.8em', textAlign: 'right', margin: '0' }}>
+      {Object.keys(badRelays).map(k => (<>
+        <code>{k}</code>: <span style={{ color: "#f64" }}>{badRelays[k]}</span><br />
+      </>))}
+      <strong>pds:</strong> <code>{oof.doc.pds.hostname}</code> (<span style={{ color: "#7f6"}}>active</span>)<br/>
+    </p>
+  )
+}
+
+function Results({ actives }) {
+  const hasFails = [];
+  let oks = 0;
+  actives.forEach(a => {
+    if (a.deactivateds.length > 0 || a.missings.length > 0 || a.fails.length > 0) {
+      hasFails.push(a);
+    } else {
+      oks += 1;
+    }
+  })
+  return (
+    <>
+      <p>{oks} account{oks !== 1 && 's'} on alternative PDSs checked out ok.</p>
+      {hasFails.length > 0 &&
+        <>
+          <h3>{hasFails.length} account{hasFails.length !== 1 && 's'} found with relay problems</h3>
+          {hasFails.map(f => (
+            <div  key={f.doc.did.val} style={{ margin: "0.5rem 0" }}>
+              <LilUser doc={f.doc}>
+                <FailSummary oof={f} />
+              </LilUser>
+            </div>
+          ))}
+        </>
+      }
+    </>
+  );
+}
+
+function CheckFollowers({ doc }: {
+  doc: MiniDoc,
+}) {
+  const [seenDids, setSeenDids] = useState({});
+  const [actives, setActives] = useState([]);
+  const [actuallyDeactivated, setActuallyDeactivated] = useState([]);
+  const [mushrooms, setMushrooms] = useState([]);
+  const [failures, setFailures] = useState([]);
+
+  const checkFollowing = useCallback(async subject => {
+    if (seenDids[subject]) return;
+    else setSeenDids(s => ({ ...s, [subject]: true }));
+
+    let doc;
+    try {
+      doc = await resolveMiniDoc(subject);
+    } catch {}
+    if (!doc) {
+      setFailures(fs => [...fs, { subject, reason: 'resolution' }]);
+      return;
+    }
+    if (doc.pds.hostname.endsWith(".host.bsky.network")) {
+      setMushrooms(ms => [...ms, doc]);
+      return;
+    }
+    let repoStatus;
+    try {
+      repoStatus = await getRepoStatus(doc.pds, doc.did);
+    } catch (e) {}
+    if (repoStatus === 'notfound') {
+      setFailures(fs => [...fs, { subject, reason: 'notfound' } ]);
+      return;
+    }
+    if (!repoStatus) {
+      setFailures(fs => [...fs, { subject, reason: 'pds getRepoStatus' } ]);
+      return;
+    }
+    if (!repoStatus.active) {
+      setActuallyDeactivated(ads => [...ads, doc]);
+      return;
+    }
+    const { deactivateds, missings, fails } = await checkRelayStatuses(doc.did);
+    setActives(as => [...as, { doc, deactivateds, missings, fails }]);
+  }, []);
+
+  useEffect(() => {
+    let cancel = false;
+    (async() => {
+      // check ourselves first
+      checkFollowing(doc.did.val);
+
+      const gen = listRecords(doc.pds, doc.did, new Collection('app.bsky.graph.follow'));
+
+      for await (const record of gen) {
+        if (cancel) break;
+        checkFollowing(record.subject);
+      }
+    })();
+    return () => cancel = true;
+  }, [doc.did.val, doc.pds]);
+
+  return (
+    <div style={{ marginBottom: "4em" }}>
+      <h2>Checking following ({Object.keys(seenDids).length})&hellip;</h2>
+      <p>Of your follows, {failures.length} failed resolution, {mushrooms.length} are on bsky mushroom PDSs, and {actuallyDeactivated.length} are actually deactivated.</p>
+      <Results actives={actives} />
+
+      <div style={{ textAlign: "left" }}>
+        <h3 style={{ margin: "3em 0 0" }}>What these results mean</h3>
+
+        <h4 style={{ marginBottom: "0", color: "#f64" }}>Deactivated</h4>
+        <p>The relay has become desynchronized with this account, incorrectly marking it as not <code>active</code>. All commits from this account will be blocked by the relay; none will be broadcast to relay consumers.</p>
+
+        <h4 style={{ marginBottom: "0", color: "#f64" }}>Not crawling</h4>
+        <p>The relay doesn't know about this account—perhaps it as never crawled its PDS. No content from this account will be discovered by the relay, so relay consumers won't see it.</p>
+
+        <h4 style={{ marginBottom: "0", color: "#f64" }}>Check failed</h4>
+        <p>This account seems active, but something went wrong when checking its status with the relay. It might be fine!</p>
+
+        <h3 style={{ margin: "3em 0 0" }}>Which relays are checked?</h3>
+
+        <ul>
+          {INCLUDED_RELAYS.map(u => (
+            <li key={u}><code>{new URL(u).hostname}</code></li>
+          ))}
+        </ul>
+
+        <h4 style={{ marginBottom: "0" }}>Excluded relays</h4>
+
+        <ul>
+          <li><code>atproto.africa</code> does not store repo status, so it can't get desynchronized, and won't drop commits.</li>
+          <li><code>bsky.network</code>, running the old BGS code, does not implement <code>com.atproto.sync.getRepoStatus</code>.</li>
+          <li>All other known relays do not allow CORS XRPC requests, so we can't check from your browser.</li>
+        </ul>
+
+        <p>Accounts on Bluesky's mushroom PDSs are not checked because accounts seem to mainly desynchronize when migrating PDSs. Since accounts can now be migrated into the mushrooms, perhaps they should be checked too?</p>
+      </div>
+    </div>
+  );
+}
+
+export default CheckFollowers;

src/deactivated/Deactivated.tsx

···
+import { useState } from 'react';
+import { MiniDoc } from './types';
+import { resolveMiniDoc } from './microcosm';
+import LilUser from './LilUser';
+import AccountInput from './AccountInput';
+import CheckFollowers from './CheckFollowers';
+
+function Deactivated() {
+  const [doc, setDoc] = useState(null);
+
+  return (
+    <div style={{
+      maxWidth: "800px",
+    }}>
+      <h1>Oops deactivated checker</h1>
+      <p>This is a relay debugging tool to check if relays are blocking accounts you follow due to desynchronized <code>active</code> state. This can happen when accounts migrate to an alternative PDS host.</p>
+
+      {doc
+        ? <LilUser doc={doc}>
+            <button
+              style={{color: "#f90"}}
+              title="clear"
+              onClick={() => setDoc(null)}
+            >&times;</button>
+          </LilUser>
+        : <AccountInput onSet={setDoc} />
+      }
+
+      {doc && <CheckFollowers doc={doc} />}
+
+      <p><small>False positive note: it's possible for a relay to set an account as <code>deactivated</code> on purpose, but this moderation action is extremely rare.</small></p>
+    </div>
+  );
+}
+
+export default Deactivated;

src/deactivated/LilUser.tsx

···
+import { useState, useEffect } from 'react';
+import { MiniDoc, Collection, Rkey } from './types';
+import { getRecord } from './microcosm';
+
+function Pfp({ did, link }: {
+  did: Did,
+  link: String,
+}) {
+  const CDN = 'https://cdn.bsky.app/img/avatar_thumbnail/plain'; // freeloading
+  const url = `${CDN}/${did.val}/${link}@jpeg`
+  return <img
+    alt="avatar"
+    src={url}
+    style={{
+      display: "block",
+      width: "100%",
+      height: "100%",
+    }}
+  />;
+}
+
+function LilUser({ doc, children }: {
+  doc: MiniDoc,
+  children: any,
+}) {
+  const [pfpLink, setPfpLink] = useState(null);
+  const [displayName, setDisplayName] = useState(null);
+
+  useEffect(() => {
+    let cancel = false;
+    (async () => {
+      const uri = `at://${doc.did.val}/app.bsky.actor.profile/self`;
+      const profile = await getRecord(
+        doc.did,
+        new Collection('app.bsky.actor.profile'),
+        new Rkey('self'),
+      );
+      const link = profile?.avatar?.ref?.$link;
+      if (link && !cancel) setPfpLink(link);
+      const name = profile?.displayName;
+      if (name && !cancel) setDisplayName(name);
+    })();
+    return () => cancel = true;
+  }, [doc.did.val]);
+
+  return (
+    <div style={{
+      display: "flex",
+      textAlign: "left",
+      alignItems: "center",
+      background: "#333",
+      padding: "0.5em 0.6em",
+      gap: "0.6em",
+      borderRadius: "0.3em",
+    }}>
+      <div style={{
+        background: "#000",
+        height: "42px",
+        width: "42px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        color: "#858",
+        fontSize: "0.8em",
+        borderRadius: "100%",
+        flexShrink: "0",
+        overflow: "hidden",
+      }}>
+        {pfpLink
+          ? <Pfp did={doc.did} link={pfpLink} />
+          : <>&hellip;</>}
+      </div>
+      <div style={{
+        flexGrow: "1",
+      }}>
+        <h3 style={{
+          margin: 0,
+          fontSize: "1em",
+        }}>
+            {displayName || doc.handle.val}
+        </h3>
+        <p style={{
+          fontSize: "1em",
+          margin: 0,
+          lineHeight: "1",
+          opacity: "0.8",
+        }}>
+          {displayName && <><code>{doc.handle.val}</code><br/></>}
+          <code>{doc.did.val}</code>
+        </p>
+      </div>
+      {children && (
+        <div>
+          {children}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default LilUser;

src/deactivated/microcosm.ts

···
+import { MiniDoc, Handle, Did, Collection, Rkey } from './types';
+
+const SLINGSHOT = 'https://slingshot.microcosm.blue';
+
+export async function resolveMiniDoc(identifier: String): MiniDoc | null {
+  const search = new URLSearchParams();
+  search.set('identifier', identifier);
+  const res = await fetch(`${SLINGSHOT}/xrpc/com.bad-example.identity.resolveMiniDoc?${search}`);
+  if (!res.ok) {
+    res.text().then(t => console.warn(`slingshot failed to resolve ${identifier} (${res.status})`, t));
+    return null;
+  }
+  const data = await res.json();
+  const did = new Did(data.did);
+  const handle = new Handle(data.handle);
+  const pds = new URL(data.pds);
+  let doc = new MiniDoc(did, handle, pds);
+  return doc;
+}
+
+export async function getRepoStatus(host: URL, repo: Did) {
+  const search = new URLSearchParams();
+  search.set('did', repo.val);
+  const res = await fetch(`${host}xrpc/com.atproto.sync.getRepoStatus?${search}`);
+  if (res.status === 404) {
+    try {
+      const err = await res.json();
+      if (err.error === 'RepoNotFound') {
+        return 'notfound'; // hacklaskjdflaksjdflkajsf
+      }
+    } catch (_) {}
+  }
+  if (!res.ok) {
+    res.text().then(t => console.warn(`slingshot failed to getRepoStatus ${host} / ${repo} (${res.status})`, t));
+    return null;
+  }
+  return await res.json();
+}
+
+export async function getRecord(repo: Did, collection: Collection, rkey: Rkey) {
+  const search = new URLSearchParams();
+  search.set('repo', repo.val);
+  search.set('collection', collection.val);
+  search.set('rkey', rkey.val);
+  const res = await fetch(`${SLINGSHOT}/xrpc/com.atproto.repo.getRecord?${search}`);
+  if (!res.ok) {
+    res.text().then(t => console.warn(`slingshot failed to getRecord ${repo}/${collection}/${rkey} (${res.status})`, t));
+    return null;
+  }
+  const data = await res.json();
+  return data.value;
+}
+
+export async function* listRecords(
+  pds: URL,
+  repo: Did,
+  collection: Collection,
+) {
+  let cursor = null;
+  do {
+    const search = new URLSearchParams();
+    search.set('repo', repo.val);
+    search.set('collection', collection.val);
+    search.set('limit', '100');
+    if (cursor) search.set('cursor', cursor);
+    const res = await fetch(`${pds}xrpc/com.atproto.repo.listRecords?${search}`);
+    if (!res.ok) {
+      res.text().then(t => console.warn(`slingshot failed to listRecords ${repo} / ${collection} (${res.status})`, t));
+      return null;
+    }
+    const data = await res.json();
+    for (const { value } of data.records) {
+      yield value;
+    }
+    cursor = data.cursor;
+  } while (cursor);
+}

src/deactivated/throttle.ts

···
+import { useCallback } from 'react';
+
+export function asyncThrottle(minT, callback, followUp) {
+  let timer = null;
+  let lastArgs = null;
+
+  function throttled(...args) {
+    lastArgs = args;
+    if (timer === null) {
+      timer = setTimeout(async () => {
+        followUp(await callback(...lastArgs));
+        timer = null;
+      }, minT);
+    }
+  }
+  return throttled;
+}

src/deactivated/types.ts

···
+class Stringy {
+  val: String;
+  constructor(val: String) {
+    this.val = val;
+  }
+}
+
+export class Did extends Stringy {}
+export class Handle extends Stringy {}
+export class Collection extends Stringy {}
+export class Rkey extends Stringy {}
+
+export class MiniDoc {
+  did: Did;
+  handle: Handle;
+  pds: URL;
+
+  constructor(did: Did, handle: Handle, pds: URL) {
+    this.did = did;
+    this.handle = handle;
+    this.pds = pds;
+  }
+};

src/index.css

···
 }
 
 button {
-  border-radius: 8px;
+  border-radius: 0.3em;
   border: 1px solid transparent;
-  padding: 0.6em 1.2em;
+  padding: 0.5em;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
   background-color: #1a1a1a;
   cursor: pointer;
-  transition: border-color 0.25s;
 }
 button:hover {
   border-color: #646cff;

src/main.tsx

···
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import './index.css'
 import App from './App.tsx'
+import Deactivated from './deactivated/Deactivated.tsx'
 
 const theme = createTheme({
   colorSchemes: {
···
   },
 });
 
+const deactivated = location.search.includes("deactivated");
+
+if (deactivated) {
+  document.title = "Oops deactivated checker";
+}
+
 createRoot(document.getElementById('root')!).render(
   <StyledEngineProvider injectFirst>
     <ThemeProvider theme={theme}>
-      <App />
+      {deactivated
+        ? <Deactivated />
+        : <App />}
     </ThemeProvider>
   </StyledEngineProvider>
 )