From a79779971669e2bfcd41eb2c6d76625ca0c17d65 Mon Sep 17 00:00:00 2001
From: Brooke <me@abcbrookie.com>
Date: Tue, 18 Aug 2026 01:03:19 -0700
Subject: [PATCH] show admin avatars

---
 server/src/routes/operators.ts |  9 ++++++++-
 web/src/OperatorsPanel.tsx     | 10 ++++++++--
 web/src/api.ts                 |  1 +
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/server/src/routes/operators.ts b/server/src/routes/operators.ts
index e064c88..b3e2928 100644
--- a/server/src/routes/operators.ts
+++ b/server/src/routes/operators.ts
@@ -81,12 +81,19 @@ export function registerOperatorRoutes(
   // ---- admin management ----------------------------------------------------
 
   app.get("/api/operators", { preHandler: requireAuth }, async () => {
-    const rows = db.prepare("SELECT * FROM operators ORDER BY added_at").all() as OperatorRow[];
+    // avatar comes along for admins that are accounts on this PDS
+    const rows = db
+      .prepare(
+        `SELECT o.*, a.avatar FROM operators o
+         LEFT JOIN accounts a ON a.did = o.did ORDER BY o.added_at`,
+      )
+      .all() as (OperatorRow & { avatar: string | null })[];
     const count = db.prepare("SELECT COUNT(*) AS n FROM passkeys WHERE operator_did = ?");
     return {
       operators: rows.map((r) => ({
         did: r.did,
         handle: r.handle,
+        avatar: r.avatar ?? undefined,
         addedAt: r.added_at,
         enrolledAt: r.enrolled_at,
         passkeys: (count.get(r.did) as { n: number }).n,
diff --git a/web/src/OperatorsPanel.tsx b/web/src/OperatorsPanel.tsx
index 29be52d..d98d348 100644
--- a/web/src/OperatorsPanel.tsx
+++ b/web/src/OperatorsPanel.tsx
@@ -4,6 +4,7 @@ import { api } from "./api.js";
 interface Operator {
   did: string;
   handle: string;
+  avatar?: string;
   addedAt: number;
   enrolledAt: number | null;
   passkeys: number;
@@ -65,9 +66,14 @@ export function OperatorsPanel() {
       )}
       {operators.map((o) => (
         <div key={o.did} className="passkey-row">
-          <span>
+          <span className="handle-cell">
+            {o.avatar ? (
+              <img className="avatar" src={o.avatar} alt="" loading="lazy" />
+            ) : (
+              <span className="avatar" aria-hidden="true" />
+            )}
             @{o.handle}
-            {o.enrolledAt == null && <span className="mono-dim"> invited</span>}
+            {o.enrolledAt == null && <span className="mono-dim">invited</span>}
           </span>
           <span className="mono-dim">
             {o.enrolledAt != null
diff --git a/web/src/api.ts b/web/src/api.ts
index 242a51d..a53c9c6 100644
--- a/web/src/api.ts
+++ b/web/src/api.ts
@@ -150,6 +150,7 @@ export const api = {
       operators: {
         did: string;
         handle: string;
+        avatar?: string;
         addedAt: number;
         enrolledAt: number | null;
         passkeys: number;
-- 
2.54.0