feat: managing admins in webui

2023-10-23 02:39:01 +02:00 · 2023-10-23 02:39:01 +02:00 · a35f07b036
parent f7b29dd150
commit a35f07b036
22 changed files with 946 additions and 451 deletions
--- a/README.md
+++ b/README.md
@ -13,17 +13,17 @@ You can put these in `.env` file or pass them as environment variables.

 - `TG_BOT_TOKEN` - Telegram bot token. Get yours from [@BotFather](https://t.me/BotFather).
  Required.
- `TG_ADMIN_USERNAMES` - Comma separated list of usernames of users that can use admin commands.
 - `DENO_KV_PATH` - [Deno KV](https://deno.land/api?s=Deno.openKv&unstable) database file path. A
  temporary file is used by default.
 - `LOG_LEVEL` - [Log level](https://deno.land/std@0.201.0/log/mod.ts?s=LogLevels). Default: `INFO`.

-You can configure more stuff in [Eris WebUI](http://localhost:5999/) when running.
-
 ## Running

- Start Stable Diffusion WebUI: `./webui.sh --api` (in SD WebUI directory)
- Start Eris: `deno task start`
+1. Start Eris: `deno task start`
+2. Visit [Eris WebUI](http://localhost:5999/) and login via Telegram.
+3. Promote yourself to admin in the Eris WebUI.
+4. Start Stable Diffusion WebUI: `./webui.sh --api` (in SD WebUI directory)
+5. Add a new worker in the Eris WebUI.

 ## Codegen

--- a/api/adminsRoute.ts
+++ b/api/adminsRoute.ts
@ -0,0 +1,129 @@
+import { Model } from "indexed_kv";
+import { info } from "std/log/mod.ts";
+import { createEndpoint, createMethodFilter, createPathFilter } from "t_rest/server";
+import { Admin, adminSchema, adminStore } from "../app/adminStore.ts";
+import { getUser, withAdmin, withUser } from "./withUser.ts";
+
+export type AdminData = Admin & { id: string };
+
+function getAdminData(adminEntry: Model<Admin>): AdminData {
+  return { id: adminEntry.id, ...adminEntry.value };
+}
+
+export const adminsRoute = createPathFilter({
+  "": createMethodFilter({
+    GET: createEndpoint(
+      {},
+      async () => {
+        const adminEntries = await adminStore.getAll();
+        const admins = adminEntries.map(getAdminData);
+        return {
+          status: 200,
+          body: { type: "application/json", data: admins satisfies AdminData[] },
+        };
+      },
+    ),
+    POST: createEndpoint(
+      {
+        query: {
+          sessionId: { type: "string" },
+        },
+        body: {
+          type: "application/json",
+          schema: {
+            type: "object",
+            properties: {
+              tgUserId: adminSchema.properties.tgUserId,
+            },
+            required: ["tgUserId"],
+          },
+        },
+      },
+      async ({ query, body }) => {
+        return withAdmin(query, async (user, adminEntry) => {
+          const newAdminUser = await getUser(body.data.tgUserId);
+          const newAdminEntry = await adminStore.create({
+            tgUserId: body.data.tgUserId,
+            promotedBy: adminEntry.id,
+          });
+          info(`User ${user.first_name} promoted user ${newAdminUser.first_name} to admin`);
+          return {
+            status: 200,
+            body: { type: "application/json", data: getAdminData(newAdminEntry) },
+          };
+        });
+      },
+    ),
+  }),
+
+  "promote_self": createMethodFilter({
+    POST: createEndpoint(
+      {
+        query: {
+          sessionId: { type: "string" },
+        },
+      },
+      // if there are no admins, allow any user to promote themselves
+      async ({ query }) => {
+        return withUser(query, async (user) => {
+          const adminEntries = await adminStore.getAll();
+          if (adminEntries.length === 0) {
+            const newAdminEntry = await adminStore.create({
+              tgUserId: user.id,
+              promotedBy: null,
+            });
+            info(`User ${user.first_name} promoted themselves to admin`);
+            return {
+              status: 200,
+              body: { type: "application/json", data: getAdminData(newAdminEntry) },
+            };
+          }
+          return {
+            status: 403,
+            body: { type: "text/plain", data: `You are not allowed to promote yourself` },
+          };
+        });
+      },
+    ),
+  }),
+
+  "{adminId}": createPathFilter({
+    "": createMethodFilter({
+      GET: createEndpoint(
+        {},
+        async ({ params }) => {
+          const adminEntry = await adminStore.getById(params.adminId!);
+          if (!adminEntry) {
+            return { status: 404, body: { type: "text/plain", data: `Admin not found` } };
+          }
+          return {
+            status: 200,
+            body: { type: "application/json", data: getAdminData(adminEntry) },
+          };
+        },
+      ),
+      DELETE: createEndpoint(
+        {
+          query: {
+            sessionId: { type: "string" },
+          },
+        },
+        async ({ params, query }) => {
+          const deletedAdminEntry = await adminStore.getById(params.adminId!);
+          if (!deletedAdminEntry) {
+            return { status: 404, body: { type: "text/plain", data: `Admin not found` } };
+          }
+          const deletedAdminUser = await getUser(deletedAdminEntry.value.tgUserId);
+          return withUser(query, async (chat) => {
+            await deletedAdminEntry.delete();
+            info(`User ${chat.first_name} demoted user ${deletedAdminUser.first_name} from admin`);
+            return {
+              status: 200,
+              body: { type: "application/json", data: null },
+            };
+          });
+        },
+      ),
+    }),
+  }),
+});
--- a/api/paramsRoute.ts
+++ b/api/paramsRoute.ts
@ -2,7 +2,7 @@ import { deepMerge } from "std/collections/deep_merge.ts";
 import { info } from "std/log/mod.ts";
 import { createEndpoint, createMethodFilter } from "t_rest/server";
 import { configSchema, getConfig, setConfig } from "../app/config.ts";
-import { withUser } from "./withUser.ts";
+import { withAdmin } from "./withUser.ts";

 export const paramsRoute = createMethodFilter({
  GET: createEndpoint(
@ -22,13 +22,13 @@ export const paramsRoute = createMethodFilter({
      },
    },
    async ({ query, body }) => {
-      return withUser(query, async (chat) => {
+      return withAdmin(query, async (user) => {
        const config = await getConfig();
-        info(`User ${chat.username} updated default params: ${JSON.stringify(body.data)}`);
+        info(`User ${user.first_name} updated default params: ${JSON.stringify(body.data)}`);
        const defaultParams = deepMerge(config.defaultParams ?? {}, body.data);
        await setConfig({ defaultParams });
        return { status: 200, body: { type: "application/json", data: config.defaultParams } };
-      }, { admin: true });
+      });
    },
  ),
 });
--- a/api/serveApi.ts
+++ b/api/serveApi.ts
@ -1,4 +1,5 @@
 import { createLoggerMiddleware, createPathFilter } from "t_rest/server";
+import { adminsRoute } from "./adminsRoute.ts";
 import { botRoute } from "./botRoute.ts";
 import { jobsRoute } from "./jobsRoute.ts";
 import { paramsRoute } from "./paramsRoute.ts";
@ -9,13 +10,14 @@ import { workersRoute } from "./workersRoute.ts";

 export const serveApi = createLoggerMiddleware(
  createPathFilter({
+    "admins": adminsRoute,
+    "bot": botRoute,
    "jobs": jobsRoute,
    "sessions": sessionsRoute,
-    "users": usersRoute,
    "settings/params": paramsRoute,
    "stats": statsRoute,
+    "users": usersRoute,
    "workers": workersRoute,
-    "bot": botRoute,
  }),
  { filterStatus: (status) => status >= 400 },
 );
--- a/api/usersRoute.ts
+++ b/api/usersRoute.ts
@ -1,20 +1,18 @@
 import { createEndpoint, createMethodFilter, createPathFilter } from "t_rest/server";
-import { getConfig } from "../app/config.ts";
 import { bot } from "../bot/mod.ts";
+import { getUser } from "./withUser.ts";
+import { adminStore } from "../app/adminStore.ts";

 export const usersRoute = createPathFilter({
  "{userId}/photo": createMethodFilter({
    GET: createEndpoint(
      { query: null, body: null },
      async ({ params }) => {
-        const chat = await bot.api.getChat(params.userId!);
-        if (chat.type !== "private") {
-          throw new Error("Chat is not private");
-        }
-        const photoData = chat.photo?.small_file_id
+        const user = await getUser(Number(params.userId!));
+        const photoData = user.photo?.small_file_id
          ? await fetch(
            `https://api.telegram.org/file/bot${bot.token}/${await bot.api.getFile(
-              chat.photo.small_file_id,
+              user.photo.small_file_id,
            ).then((file) => file.file_path)}`,
          ).then((resp) => resp.arrayBuffer())
          : undefined;
@ -36,17 +34,14 @@ export const usersRoute = createPathFilter({
    GET: createEndpoint(
      { query: null, body: null },
      async ({ params }) => {
-        const chat = await bot.api.getChat(params.userId!);
-        if (chat.type !== "private") {
-          throw new Error("Chat is not private");
-        }
-        const config = await getConfig();
-        const isAdmin = chat.username && config?.adminUsernames?.includes(chat.username);
+        const user = await getUser(Number(params.userId!));
+        const [adminEntry] = await adminStore.getBy("tgUserId", { value: user.id });
+        const admin = adminEntry?.value;
        return {
          status: 200,
          body: {
            type: "application/json",
-            data: { ...chat, isAdmin },
+            data: { ...user, admin },
          },
        };
      },
--- a/api/withUser.ts
+++ b/api/withUser.ts
@ -1,28 +1,40 @@
 import { Chat } from "grammy_types";
+import { Model } from "indexed_kv";
 import { Output } from "t_rest/client";
-import { getConfig } from "../app/config.ts";
+import { Admin, adminStore } from "../app/adminStore.ts";
 import { bot } from "../bot/mod.ts";
 import { sessions } from "./sessionsRoute.ts";

 export async function withUser<O extends Output>(
  query: { sessionId: string },
  cb: (user: Chat.PrivateGetChat) => Promise<O>,
-  options?: { admin?: boolean },
 ) {
  const session = sessions.get(query.sessionId);
  if (!session?.userId) {
    return { status: 401, body: { type: "text/plain", data: "Must be logged in" } } as const;
  }
-  const chat = await bot.api.getChat(session.userId);
-  if (chat.type !== "private") throw new Error("Chat is not private");
-  if (options?.admin) {
-    if (!chat.username) {
-      return { status: 403, body: { type: "text/plain", data: "Must have a username" } } as const;
-    }
-    const config = await getConfig();
-    if (!config?.adminUsernames?.includes(chat.username)) {
-      return { status: 403, body: { type: "text/plain", data: "Must be an admin" } } as const;
-    }
-  }
-  return cb(chat);
+  const user = await getUser(session.userId);
+  return cb(user);
+}
+
+export async function withAdmin<O extends Output>(
+  query: { sessionId: string },
+  cb: (user: Chat.PrivateGetChat, admin: Model<Admin>) => Promise<O>,
+) {
+  const session = sessions.get(query.sessionId);
+  if (!session?.userId) {
+    return { status: 401, body: { type: "text/plain", data: "Must be logged in" } } as const;
+  }
+  const user = await getUser(session.userId);
+  const [admin] = await adminStore.getBy("tgUserId", { value: session.userId });
+  if (!admin) {
+    return { status: 403, body: { type: "text/plain", data: "Must be an admin" } } as const;
+  }
+  return cb(user, admin);
+}
+
+export async function getUser(userId: number): Promise<Chat.PrivateGetChat> {
+  const chat = await bot.api.getChat(userId);
+  if (chat.type !== "private") throw new Error("Chat is not private");
+  return chat;
 }
--- a/api/workersRoute.ts
+++ b/api/workersRoute.ts
@ -13,7 +13,7 @@ import {
 } from "../app/workerInstanceStore.ts";
 import { getAuthHeader } from "../utils/getAuthHeader.ts";
 import { omitUndef } from "../utils/omitUndef.ts";
-import { withUser } from "./withUser.ts";
+import { withAdmin } from "./withUser.ts";

 export type WorkerData = Omit<WorkerInstance, "sdUrl" | "sdAuth"> & {
  id: string;
@ -89,14 +89,14 @@ export const workersRoute = createPathFilter({
        },
      },
      async ({ query, body }) => {
-        return withUser(query, async (chat) => {
+        return withAdmin(query, async (user) => {
          const workerInstance = await workerInstanceStore.create(body.data);
-          info(`User ${chat.username} created worker ${workerInstance.id}`);
+          info(`User ${user.first_name} created worker ${workerInstance.value.name}`);
          return {
            status: 200,
            body: { type: "application/json", data: await getWorkerData(workerInstance) },
          };
-        }, { admin: true });
+        });
      },
    ),
  }),
@ -131,9 +131,9 @@ export const workersRoute = createPathFilter({
          if (!workerInstance) {
            return { status: 404, body: { type: "text/plain", data: `Worker not found` } };
          }
-          return withUser(query, async (chat) => {
+          return withAdmin(query, async (user) => {
            info(
-              `User ${chat.username} updated worker ${params.workerId}: ${
+              `User ${user.first_name} updated worker ${workerInstance.value.name}: ${
                JSON.stringify(body.data)
              }`,
            );
@ -142,7 +142,7 @@ export const workersRoute = createPathFilter({
              status: 200,
              body: { type: "application/json", data: await getWorkerData(workerInstance) },
            };
-          }, { admin: true });
+          });
        },
      ),
      DELETE: createEndpoint(
@ -157,11 +157,11 @@ export const workersRoute = createPathFilter({
          if (!workerInstance) {
            return { status: 404, body: { type: "text/plain", data: `Worker not found` } };
          }
-          return withUser(query, async (chat) => {
-            info(`User ${chat.username} deleted worker ${params.workerId}`);
+          return withAdmin(query, async (user) => {
+            info(`User ${user.first_name} deleted worker ${workerInstance.value.name}`);
            await workerInstance.delete();
            return { status: 200, body: { type: "application/json", data: null } };
-          }, { admin: true });
+          });
        },
      ),
    }),
--- a/app/adminStore.ts
+++ b/app/adminStore.ts
@ -0,0 +1,24 @@
+import { Store } from "indexed_kv";
+import { JsonSchema, jsonType } from "t_rest/server";
+import { db } from "./db.ts";
+
+export const adminSchema = {
+  type: "object",
+  properties: {
+    tgUserId: { type: "number" },
+    promotedBy: { type: ["string", "null"] },
+  },
+  required: ["tgUserId", "promotedBy"],
+} as const satisfies JsonSchema;
+
+export type Admin = jsonType<typeof adminSchema>;
+
+type AdminIndices = {
+  tgUserId: number;
+};
+
+export const adminStore = new Store<Admin, AdminIndices>(db, "adminUsers", {
+  indices: {
+    tgUserId: { getValue: (adminUser) => adminUser.tgUserId },
+  },
+});
--- a/app/config.ts
+++ b/app/config.ts
@ -4,7 +4,6 @@ import { JsonSchema, jsonType } from "t_rest/server";
 export const configSchema = {
  type: "object",
  properties: {
-    adminUsernames: { type: "array", items: { type: "string" } },
    pausedReason: { type: ["string", "null"] },
    maxUserJobs: { type: "number" },
    maxJobs: { type: "number" },
@ -31,7 +30,6 @@ export async function getConfig(): Promise<Config> {
  const configEntry = await db.get<Config>(["config"]);
  const config = configEntry?.value;
  return {
-    adminUsernames: config?.adminUsernames ?? Deno.env.get("TG_ADMIN_USERNAMES")?.split(",") ?? [],
    pausedReason: config?.pausedReason ?? null,
    maxUserJobs: config?.maxUserJobs ?? Infinity,
    maxJobs: config?.maxJobs ?? Infinity,
@ -42,7 +40,6 @@ export async function getConfig(): Promise<Config> {
 export async function setConfig(newConfig: Partial<Config>): Promise<void> {
  const oldConfig = await getConfig();
  const config: Config = {
-    adminUsernames: newConfig.adminUsernames ?? oldConfig.adminUsernames,
    pausedReason: newConfig.pausedReason ?? oldConfig.pausedReason,
    maxUserJobs: newConfig.maxUserJobs ?? oldConfig.maxUserJobs,
    maxJobs: newConfig.maxJobs ?? oldConfig.maxJobs,
--- a/bot/broadcastCommand.ts
+++ b/bot/broadcastCommand.ts
@ -2,7 +2,7 @@ import { CommandContext } from "grammy";
 import { bold, fmt, FormattedString } from "grammy_parse_mode";
 import { distinctBy } from "std/collections/distinct_by.ts";
 import { error, info } from "std/log/mod.ts";
-import { getConfig } from "../app/config.ts";
+import { adminStore } from "../app/adminStore.ts";
 import { generationStore } from "../app/generationStore.ts";
 import { formatUserChat } from "../utils/formatUserChat.ts";
 import { ErisContext } from "./mod.ts";
@ -12,9 +12,9 @@ export async function broadcastCommand(ctx: CommandContext<ErisContext>) {
    return ctx.reply("I don't know who you are.");
  }

-  const config = await getConfig();
+  const [admin] = await adminStore.getBy("tgUserId", { value: ctx.from.id });

-  if (!config.adminUsernames.includes(ctx.from.username)) {
+  if (!admin) {
    return ctx.reply("Only a bot admin can use this command.");
  }

--- a/bot/mod.ts
+++ b/bot/mod.ts
@ -4,7 +4,6 @@ import { hydrateReply, ParseModeFlavor } from "grammy_parse_mode";
 import { run, sequentialize } from "grammy_runner";
 import { error, info, warning } from "std/log/mod.ts";
 import { sessions } from "../api/sessionsRoute.ts";
-import { getConfig, setConfig } from "../app/config.ts";
 import { formatUserChat } from "../utils/formatUserChat.ts";
 import { omitUndef } from "../utils/omitUndef.ts";
 import { broadcastCommand } from "./broadcastCommand.ts";
@ -170,30 +169,6 @@ bot.command("cancel", cancelCommand);

 bot.command("broadcast", broadcastCommand);

-bot.command("pause", async (ctx) => {
-  if (!ctx.from?.username) return;
-  const config = await getConfig();
-  if (!config.adminUsernames.includes(ctx.from.username)) return;
-  if (config.pausedReason != null) {
-    return ctx.reply(`Already paused: ${config.pausedReason}`);
-  }
-  await setConfig({
-    pausedReason: ctx.match || "No reason given",
-  });
-  warning(`Bot paused by ${ctx.from.first_name} because ${config.pausedReason}`);
-  return ctx.reply("Paused");
-});
-
-bot.command("resume", async (ctx) => {
-  if (!ctx.from?.username) return;
-  const config = await getConfig();
-  if (!config.adminUsernames.includes(ctx.from.username)) return;
-  if (config.pausedReason == null) return ctx.reply("Already running");
-  await setConfig({ pausedReason: null });
-  info(`Bot resumed by ${ctx.from.first_name}`);
-  return ctx.reply("Resumed");
-});
-
 bot.command("crash", () => {
  throw new Error("Crash command used");
 });
--- a/deno.json
+++ b/deno.json
@ -45,8 +45,7 @@
    "t_rest/server": "https://esm.sh/ty-rest@0.4.1/server",
    "twind/core": "https://esm.sh/@twind/core@1.1.3",
    "twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.4",
-    "ulid": "https://deno.land/x/ulid@v0.3.0/mod.ts",
-    "use-local-storage": "https://esm.sh/use-local-storage@3.0.0?external=react&dev"
+    "ulid": "https://deno.land/x/ulid@v0.3.0/mod.ts"
  },
  "lint": {
    "rules": {
--- a/ui/AdminsPage.tsx
+++ b/ui/AdminsPage.tsx
@ -0,0 +1,250 @@
+import React, { useRef } from "react";
+import useSWR, { useSWRConfig } from "swr";
+import { AdminData } from "../api/adminsRoute.ts";
+import { fetchApi, handleResponse } from "./apiClient.ts";
+
+export function AdminsPage(props: { sessionId: string | null }) {
+  const { sessionId } = props;
+
+  const { mutate } = useSWRConfig();
+
+  const addDialogRef = useRef<HTMLDialogElement>(null);
+
+  const getSession = useSWR(
+    sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
+    (args) => fetchApi(...args).then(handleResponse),
+  );
+  const getUser = useSWR(
+    getSession.data?.userId
+      ? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
+      : null,
+    (args) => fetchApi(...args).then(handleResponse),
+  );
+
+  const getAdmins = useSWR(
+    ["admins", "GET", {}] as const,
+    (args) => fetchApi(...args).then(handleResponse),
+  );
+
+  return (
+    <>
+      {getUser.data && getAdmins.data && getAdmins.data.length === 0 && (
+        <button
+          className="button-filled"
+          onClick={() => {
+            mutate(
+              (key) => Array.isArray(key) && key[0] === "admins",
+              async () =>
+                fetchApi("admins/promote_self", "POST", {
+                  query: { sessionId: sessionId ?? "" },
+                }).then(handleResponse),
+              { populateCache: false },
+            );
+          }}
+        >
+          Promote me to admin
+        </button>
+      )}
+
+      {getAdmins.data?.length
+        ? (
+          <ul className="my-4 flex flex-col gap-2">
+            {getAdmins.data.map((admin) => (
+              <AdminListItem key={admin.id} admin={admin} sessionId={sessionId} />
+            ))}
+          </ul>
+        )
+        : getAdmins.data?.length === 0
+        ? <p>No admins</p>
+        : getAdmins.error
+        ? <p className="alert">Loading admins failed</p>
+        : <div className="spinner self-center" />}
+
+      {getUser.data?.admin && (
+        <button
+          className="button-filled"
+          onClick={() => addDialogRef.current?.showModal()}
+        >
+          Add admin
+        </button>
+      )}
+
+      <AddAdminDialog
+        dialogRef={addDialogRef}
+        sessionId={sessionId}
+      />
+    </>
+  );
+}
+
+function AddAdminDialog(props: {
+  dialogRef: React.RefObject<HTMLDialogElement>;
+  sessionId: string | null;
+}) {
+  const { dialogRef, sessionId } = props;
+
+  const { mutate } = useSWRConfig();
+
+  return (
+    <dialog ref={dialogRef} className="dialog animate-pop-in backdrop-animate-fade-in">
+      <form
+        method="dialog"
+        className="flex flex-col gap-4 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          const data = new FormData(e.target as HTMLFormElement);
+          mutate(
+            (key) => Array.isArray(key) && key[0] === "admins",
+            async () =>
+              fetchApi("admins", "POST", {
+                query: { sessionId: sessionId! },
+                body: {
+                  type: "application/json",
+                  data: {
+                    tgUserId: Number(data.get("tgUserId") as string),
+                  },
+                },
+              }).then(handleResponse),
+            { populateCache: false },
+          );
+          dialogRef.current?.close();
+        }}
+      >
+        <label className="flex flex-col items-stretch gap-1">
+          <span className="text-sm">
+            Telegram user ID
+          </span>
+          <input
+            className="input-text"
+            type="text"
+            name="tgUserId"
+            required
+            pattern="-?\d+"
+          />
+        </label>
+
+        <div className="flex gap-2 items-center justify-end">
+          <button
+            type="button"
+            className="button-outlined"
+            onClick={() => dialogRef.current?.close()}
+          >
+            Close
+          </button>
+          <button type="submit" className="button-filled">
+            Save
+          </button>
+        </div>
+      </form>
+    </dialog>
+  );
+}
+
+function AdminListItem(props: { admin: AdminData; sessionId: string | null }) {
+  const { admin, sessionId } = props;
+
+  const deleteDialogRef = useRef<HTMLDialogElement>(null);
+
+  const getAdminUser = useSWR(
+    ["users/{userId}", "GET", { params: { userId: String(admin.tgUserId) } }] as const,
+    (args) => fetchApi(...args).then(handleResponse),
+  );
+
+  const getSession = useSWR(
+    sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
+    (args) => fetchApi(...args).then(handleResponse),
+  );
+  const getUser = useSWR(
+    getSession.data?.userId
+      ? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
+      : null,
+    (args) => fetchApi(...args).then(handleResponse),
+  );
+
+  return (
+    <li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
+      <p className="font-bold">
+        {getAdminUser.data?.first_name ?? admin.id} {getAdminUser.data?.last_name}{" "}
+        {getAdminUser.data?.username
+          ? (
+            <a href={`https://t.me/${getAdminUser.data.username}`} className="link">
+              @{getAdminUser.data.username}
+            </a>
+          )
+          : null}
+      </p>
+      {getAdminUser.data?.bio
+        ? (
+          <p>
+            {getAdminUser.data?.bio}
+          </p>
+        )
+        : null}
+      {getUser.data?.admin && (
+        <p className="flex gap-2">
+          <button
+            className="button-outlined"
+            onClick={() => deleteDialogRef.current?.showModal()}
+          >
+            Delete
+          </button>
+        </p>
+      )}
+      <DeleteAdminDialog
+        dialogRef={deleteDialogRef}
+        adminId={admin.id}
+        sessionId={sessionId}
+      />
+    </li>
+  );
+}
+
+function DeleteAdminDialog(props: {
+  dialogRef: React.RefObject<HTMLDialogElement>;
+  adminId: string;
+  sessionId: string | null;
+}) {
+  const { dialogRef, adminId, sessionId } = props;
+  const { mutate } = useSWRConfig();
+
+  return (
+    <dialog
+      ref={dialogRef}
+      className="dialog animate-pop-in backdrop-animate-fade-in"
+    >
+      <form
+        method="dialog"
+        className="flex flex-col gap-4 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          mutate(
+            (key) => Array.isArray(key) && key[0] === "admins",
+            async () =>
+              fetchApi("admins/{adminId}", "DELETE", {
+                query: { sessionId: sessionId! },
+                params: { adminId: adminId },
+              }).then(handleResponse),
+            { populateCache: false },
+          );
+          dialogRef.current?.close();
+        }}
+      >
+        <p>
+          Are you sure you want to delete this admin?
+        </p>
+        <div className="flex gap-2 items-center justify-end">
+          <button
+            type="button"
+            className="button-outlined"
+            onClick={() => dialogRef.current?.close()}
+          >
+            Close
+          </button>
+          <button type="submit" className="button-filled">
+            Delete
+          </button>
+        </div>
+      </form>
+    </dialog>
+  );
+}
--- a/ui/App.tsx
+++ b/ui/App.tsx
@ -1,16 +1,17 @@
 import React, { useEffect } from "react";
 import { Route, Routes } from "react-router-dom";
-import useLocalStorage from "use-local-storage";
+import { AdminsPage } from "./AdminsPage.tsx";
 import { AppHeader } from "./AppHeader.tsx";
 import { QueuePage } from "./QueuePage.tsx";
 import { SettingsPage } from "./SettingsPage.tsx";
 import { StatsPage } from "./StatsPage.tsx";
 import { WorkersPage } from "./WorkersPage.tsx";
-import { fetchApi, handleResponse } from "./apiClient.tsx";
+import { fetchApi, handleResponse } from "./apiClient.ts";
+import { useLocalStorage } from "./useLocalStorage.ts";

 export function App() {
  // store session ID in the local storage
-  const [sessionId, setSessionId] = useLocalStorage("sessionId", "");
+  const [sessionId, setSessionId] = useLocalStorage("sessionId");

  // initialize a new session when there is no session ID
  useEffect(() => {
@ -27,11 +28,12 @@ export function App() {
      <AppHeader
        className="self-stretch"
        sessionId={sessionId}
-        onLogOut={() => setSessionId("")}
+        onLogOut={() => setSessionId(null)}
      />
      <div className="self-center w-full max-w-screen-md flex flex-col items-stretch gap-4 p-4">
        <Routes>
          <Route path="/" element={<StatsPage />} />
+          <Route path="/admins" element={<AdminsPage sessionId={sessionId} />} />
          <Route path="/workers" element={<WorkersPage sessionId={sessionId} />} />
          <Route path="/queue" element={<QueuePage />} />
          <Route path="/settings" element={<SettingsPage sessionId={sessionId} />} />
--- a/ui/AppHeader.tsx
+++ b/ui/AppHeader.tsx
@ -2,7 +2,7 @@ import React, { ReactNode } from "react";
 import { NavLink } from "react-router-dom";
 import useSWR from "swr";
 import { cx } from "twind/core";
-import { fetchApi, handleResponse } from "./apiClient.tsx";
+import { fetchApi, handleResponse } from "./apiClient.ts";

 function NavTab(props: { to: string; children: ReactNode }) {
  return (
@ -15,33 +15,35 @@ function NavTab(props: { to: string; children: ReactNode }) {
  );
 }

-export function AppHeader(
-  props: { className?: string; sessionId?: string; onLogOut: () => void },
-) {
+export function AppHeader(props: {
+  className?: string;
+  sessionId: string | null;
+  onLogOut: () => void;
+}) {
  const { className, sessionId, onLogOut } = props;

-  const session = useSWR(
+  const getSession = useSWR(
    sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
    (args) => fetchApi(...args).then(handleResponse),
    { onError: () => onLogOut() },
  );

-  const user = useSWR(
-    session.data?.userId
-      ? ["users/{userId}", "GET", { params: { userId: String(session.data.userId) } }] as const
+  const getUser = useSWR(
+    getSession.data?.userId
+      ? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
      : null,
    (args) => fetchApi(...args).then(handleResponse),
  );

-  const bot = useSWR(
+  const getBot = useSWR(
    ["bot", "GET", {}] as const,
    (args) => fetchApi(...args).then(handleResponse),
  );

-  const userPhoto = useSWR(
-    session.data?.userId
+  const getUserPhoto = useSWR(
+    getSession.data?.userId
      ? ["users/{userId}/photo", "GET", {
-        params: { userId: String(session.data.userId) },
+        params: { userId: String(getSession.data.userId) },
      }] as const
      : null,
    (args) => fetchApi(...args).then(handleResponse).then((blob) => URL.createObjectURL(blob)),
@ -62,6 +64,9 @@ export function AppHeader(
        <NavTab to="/">
          Stats
        </NavTab>
+        <NavTab to="/admins">
+          Admins
+        </NavTab>
        <NavTab to="/workers">
          Workers
        </NavTab>
@ -74,29 +79,29 @@ export function AppHeader(
      </nav>

      {/* loading indicator */}
-      {session.isLoading || user.isLoading ? <div className="spinner" /> : null}
+      {getSession.isLoading || getUser.isLoading ? <div className="spinner" /> : null}

      {/* user avatar */}
-      {user.data
-        ? userPhoto.data
+      {getUser.data
+        ? getUserPhoto.data
          ? (
            <img
-              src={userPhoto.data}
+              src={getUserPhoto.data}
              alt="avatar"
              className="w-9 h-9 rounded-full"
            />
          )
          : (
            <div className="w-9 h-9 rounded-full bg-zinc-400 dark:bg-zinc-500 flex items-center justify-center text-white text-2xl font-bold select-none">
-              {user.data.first_name.at(0)?.toUpperCase()}
+              {getUser.data.first_name.at(0)?.toUpperCase()}
            </div>
          )
        : null}

      {/* login/logout button */}
-      {!session.isLoading && !user.isLoading && bot.data && sessionId
+      {!getSession.isLoading && !getUser.isLoading && getBot.data && sessionId
        ? (
-          user.data
+          getUser.data
            ? (
              <button className="button-outlined" onClick={() => onLogOut()}>
                Logout
@ -105,7 +110,7 @@ export function AppHeader(
            : (
              <a
                className="button-filled"
-                href={`https://t.me/${bot.data.username}?start=${sessionId}`}
+                href={`https://t.me/${getBot.data.username}?start=${sessionId}`}
                target="_blank"
              >
                Login
--- a/ui/QueuePage.tsx
+++ b/ui/QueuePage.tsx
@ -3,10 +3,10 @@ import FlipMove from "react-flip-move";
 import useSWR from "swr";
 import { getFlagEmoji } from "../utils/getFlagEmoji.ts";
 import { Progress } from "./Progress.tsx";
-import { fetchApi, handleResponse } from "./apiClient.tsx";
+import { fetchApi, handleResponse } from "./apiClient.ts";

 export function QueuePage() {
-  const jobs = useSWR(
+  const getJobs = useSWR(
    ["jobs", "GET", {}] as const,
    (args) => fetchApi(...args).then(handleResponse),
    { refreshInterval: 2000 },
@ -19,7 +19,7 @@ export function QueuePage() {
      enterAnimation="fade"
      leaveAnimation="fade"
    >
-      {jobs.data?.map((job) => (
+      {getJobs.data?.map((job) => (
        <li
          className="flex items-baseline gap-2 bg-zinc-100 dark:bg-zinc-700 px-2 py-1 rounded-xl"
          key={job.id.join("/")}
--- a/ui/SettingsPage.tsx
+++ b/ui/SettingsPage.tsx
@ -1,79 +1,82 @@
-import React, { ReactNode, useState } from "react";
+import React, { useState } from "react";
 import useSWR from "swr";
 import { cx } from "twind/core";
-import { fetchApi, handleResponse } from "./apiClient.tsx";
+import { fetchApi, handleResponse } from "./apiClient.ts";

-export function SettingsPage(props: { sessionId: string }) {
+export function SettingsPage(props: { sessionId: string | null }) {
  const { sessionId } = props;
-  const session = useSWR(
+
+  const getSession = useSWR(
    sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
    (args) => fetchApi(...args).then(handleResponse),
  );
-  const user = useSWR(
-    session.data?.userId
-      ? ["users/{userId}", "GET", { params: { userId: String(session.data.userId) } }] as const
+  const getUser = useSWR(
+    getSession.data?.userId
+      ? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
      : null,
    (args) => fetchApi(...args).then(handleResponse),
  );
-  const params = useSWR(
+  const getParams = useSWR(
    ["settings/params", "GET", {}] as const,
    (args) => fetchApi(...args).then(handleResponse),
  );
-  const [changedParams, setChangedParams] = useState<Partial<typeof params.data>>({});
-  const [error, setError] = useState<string>();
+  const [newParams, setNewParams] = useState<Partial<typeof getParams.data>>({});
+  const [patchParamsError, setPatchParamsError] = useState<string>();

  return (
    <form
      className="flex flex-col items-stretch gap-4"
      onSubmit={(e) => {
        e.preventDefault();
-        params.mutate(() =>
+        getParams.mutate(() =>
          fetchApi("settings/params", "PATCH", {
-            query: { sessionId },
-            body: { type: "application/json", data: changedParams ?? {} },
+            query: { sessionId: sessionId ?? "" },
+            body: { type: "application/json", data: newParams ?? {} },
          }).then(handleResponse)
        )
-          .then(() => setChangedParams({}))
-          .catch((e) => setError(String(e)));
+          .then(() => setNewParams({}))
+          .catch((e) => setPatchParamsError(String(e)));
      }}
    >
      <label className="flex flex-col items-stretch gap-1">
        <span className="text-sm">
-          Negative prompt {changedParams?.negative_prompt != null ? "(Changed)" : ""}
+          Negative prompt {newParams?.negative_prompt != null ? "(Changed)" : ""}
        </span>
        <textarea
          className="input-text"
-          disabled={params.isLoading || !user.data?.isAdmin}
-          value={changedParams?.negative_prompt ??
-            params.data?.negative_prompt ??
+          disabled={getParams.isLoading || !getUser.data?.admin}
+          value={newParams?.negative_prompt ??
+            getParams.data?.negative_prompt ??
            ""}
          onChange={(e) =>
-            setChangedParams((params) => ({
+            setNewParams((params) => ({
              ...params,
              negative_prompt: e.target.value,
            }))}
        />
      </label>
+
      <label className="flex flex-col items-stretch gap-1">
        <span className="text-sm">
-          Sampler {changedParams?.sampler_name != null ? "(Changed)" : ""}
+          Sampler {newParams?.sampler_name != null ? "(Changed)" : ""}
        </span>
        <input
          className="input-text"
-          disabled={params.isLoading || !user.data?.isAdmin}
-          value={changedParams?.sampler_name ??
-            params.data?.sampler_name ??
+          disabled={getParams.isLoading || !getUser.data?.admin}
+          value={newParams?.sampler_name ??
+            getParams.data?.sampler_name ??
            ""}
          onChange={(e) =>
-            setChangedParams((params) => ({
+            setNewParams((params) => ({
              ...params,
              sampler_name: e.target.value,
            }))}
        />
      </label>
+
      <label className="flex flex-col items-stretch gap-1">
        <span className="text-sm">
-          Steps {changedParams?.steps != null ? "(Changed)" : ""}
+          Steps {newParams?.steps != null ? "(Changed)" : ""}
        </span>
        <span className="flex items-center gap-1">
          <input
@ -82,12 +85,12 @@ export function SettingsPage(props: { sessionId: string }) {
            min={5}
            max={50}
            step={5}
-            disabled={params.isLoading || !user.data?.isAdmin}
-            value={changedParams?.steps ??
-              params.data?.steps ??
+            disabled={getParams.isLoading || !getUser.data?.admin}
+            value={newParams?.steps ??
+              getParams.data?.steps ??
              0}
            onChange={(e) =>
-              setChangedParams((params) => ({
+              setNewParams((params) => ({
                ...params,
                steps: Number(e.target.value),
              }))}
@ -98,21 +101,22 @@ export function SettingsPage(props: { sessionId: string }) {
            min={5}
            max={50}
            step={5}
-            disabled={params.isLoading || !user.data?.isAdmin}
-            value={changedParams?.steps ??
-              params.data?.steps ??
+            disabled={getParams.isLoading || !getUser.data?.admin}
+            value={newParams?.steps ??
+              getParams.data?.steps ??
              0}
            onChange={(e) =>
-              setChangedParams((params) => ({
+              setNewParams((params) => ({
                ...params,
                steps: Number(e.target.value),
              }))}
          />
        </span>
      </label>
+
      <label className="flex flex-col items-stretch gap-1">
        <span className="text-sm">
-          Detail {changedParams?.cfg_scale != null ? "(Changed)" : ""}
+          Detail {newParams?.cfg_scale != null ? "(Changed)" : ""}
        </span>
        <span className="flex items-center gap-1">
          <input
@ -121,12 +125,12 @@ export function SettingsPage(props: { sessionId: string }) {
            min={1}
            max={20}
            step={1}
-            disabled={params.isLoading || !user.data?.isAdmin}
-            value={changedParams?.cfg_scale ??
-              params.data?.cfg_scale ??
+            disabled={getParams.isLoading || !getUser.data?.admin}
+            value={newParams?.cfg_scale ??
+              getParams.data?.cfg_scale ??
              0}
            onChange={(e) =>
-              setChangedParams((params) => ({
+              setNewParams((params) => ({
                ...params,
                cfg_scale: Number(e.target.value),
              }))}
@ -137,22 +141,23 @@ export function SettingsPage(props: { sessionId: string }) {
            min={1}
            max={20}
            step={1}
-            disabled={params.isLoading || !user.data?.isAdmin}
-            value={changedParams?.cfg_scale ??
-              params.data?.cfg_scale ??
+            disabled={getParams.isLoading || !getUser.data?.admin}
+            value={newParams?.cfg_scale ??
+              getParams.data?.cfg_scale ??
              0}
            onChange={(e) =>
-              setChangedParams((params) => ({
+              setNewParams((params) => ({
                ...params,
                cfg_scale: Number(e.target.value),
              }))}
          />
        </span>
      </label>
+
      <div className="flex gap-4">
        <label className="flex flex-1 flex-col items-stretch gap-1">
          <span className="text-sm">
-            Width {changedParams?.width != null ? "(Changed)" : ""}
+            Width {newParams?.width != null ? "(Changed)" : ""}
          </span>
          <input
            className="input-text"
@ -160,12 +165,12 @@ export function SettingsPage(props: { sessionId: string }) {
            min={64}
            max={2048}
            step={64}
-            disabled={params.isLoading || !user.data?.isAdmin}
-            value={changedParams?.width ??
-              params.data?.width ??
+            disabled={getParams.isLoading || !getUser.data?.admin}
+            value={newParams?.width ??
+              getParams.data?.width ??
              0}
            onChange={(e) =>
-              setChangedParams((params) => ({
+              setNewParams((params) => ({
                ...params,
                width: Number(e.target.value),
              }))}
@ -176,12 +181,12 @@ export function SettingsPage(props: { sessionId: string }) {
            min={64}
            max={2048}
            step={64}
-            disabled={params.isLoading || !user.data?.isAdmin}
-            value={changedParams?.width ??
-              params.data?.width ??
+            disabled={getParams.isLoading || !getUser.data?.admin}
+            value={newParams?.width ??
+              getParams.data?.width ??
              0}
            onChange={(e) =>
-              setChangedParams((params) => ({
+              setNewParams((params) => ({
                ...params,
                width: Number(e.target.value),
              }))}
@ -189,7 +194,7 @@ export function SettingsPage(props: { sessionId: string }) {
        </label>
        <label className="flex flex-1 flex-col items-stretch gap-1">
          <span className="text-sm">
-            Height {changedParams?.height != null ? "(Changed)" : ""}
+            Height {newParams?.height != null ? "(Changed)" : ""}
          </span>
          <input
            className="input-text"
@ -197,12 +202,12 @@ export function SettingsPage(props: { sessionId: string }) {
            min={64}
            max={2048}
            step={64}
-            disabled={params.isLoading || !user.data?.isAdmin}
-            value={changedParams?.height ??
-              params.data?.height ??
+            disabled={getParams.isLoading || !getUser.data?.admin}
+            value={newParams?.height ??
+              getParams.data?.height ??
              0}
            onChange={(e) =>
-              setChangedParams((params) => ({
+              setNewParams((params) => ({
                ...params,
                height: Number(e.target.value),
              }))}
@ -213,35 +218,54 @@ export function SettingsPage(props: { sessionId: string }) {
            min={64}
            max={2048}
            step={64}
-            disabled={params.isLoading || !user.data?.isAdmin}
-            value={changedParams?.height ??
-              params.data?.height ??
+            disabled={getParams.isLoading || !getUser.data?.admin}
+            value={newParams?.height ??
+              getParams.data?.height ??
              0}
            onChange={(e) =>
-              setChangedParams((params) => ({
+              setNewParams((params) => ({
                ...params,
                height: Number(e.target.value),
              }))}
          />
        </label>
      </div>
-      {error ? <Alert onClose={() => setError(undefined)}>{error}</Alert> : null}
-      {params.error ? <Alert>{params.error.message}</Alert> : null}
+
+      {patchParamsError
+        ? (
+          <p className="alert">
+            <span className="flex-grow">Updating params failed: {patchParamsError}</span>
+            <button className="button-ghost" onClick={() => setPatchParamsError(undefined)}>
+              Close
+            </button>
+          </p>
+        )
+        : null}
+      {getParams.error
+        ? (
+          <p className="alert">
+            <span className="flex-grow">
+              Loading params failed: {String(getParams.error)}
+            </span>
+          </p>
+        )
+        : null}
+
      <div className="flex gap-2 items-center justify-end">
        <button
          type="button"
-          className={cx("button-outlined ripple", params.isLoading && "bg-stripes")}
-          disabled={params.isLoading || !user.data?.isAdmin ||
-            Object.keys(changedParams ?? {}).length === 0}
-          onClick={() => setChangedParams({})}
+          className={cx("button-outlined ripple", getParams.isLoading && "bg-stripes")}
+          disabled={getParams.isLoading || !getUser.data?.admin ||
+            Object.keys(newParams ?? {}).length === 0}
+          onClick={() => setNewParams({})}
        >
          Reset
        </button>
        <button
          type="submit"
-          className={cx("button-filled ripple", params.isLoading && "bg-stripes")}
-          disabled={params.isLoading || !user.data?.isAdmin ||
-            Object.keys(changedParams ?? {}).length === 0}
+          className={cx("button-filled ripple", getParams.isLoading && "bg-stripes")}
+          disabled={getParams.isLoading || !getUser.data?.admin ||
+            Object.keys(newParams ?? {}).length === 0}
        >
          Save
        </button>
@ -249,26 +273,3 @@ export function SettingsPage(props: { sessionId: string }) {
    </form>
  );
 }
-
-function Alert(props: { children: ReactNode; onClose?: () => void }) {
-  const { children, onClose } = props;
-  return (
-    <p
-      role="alert"
-      className="px-4 py-2 flex gap-2 items-center bg-red-500 text-white rounded-sm shadow-md"
-    >
-      <span className="flex-grow">{children}</span>
-      {onClose
-        ? (
-          <button
-            type="button"
-            className="button-ghost"
-            onClick={() => onClose()}
-          >
-            Close
-          </button>
-        )
-        : null}
-    </p>
-  );
-}
--- a/ui/StatsPage.tsx
+++ b/ui/StatsPage.tsx
@ -1,10 +1,10 @@
 import React from "react";
-import { fetchApi, handleResponse } from "./apiClient.tsx";
+import { fetchApi, handleResponse } from "./apiClient.ts";
 import useSWR from "swr";
 import { Counter } from "./Counter.tsx";

 export function StatsPage() {
-  const globalStats = useSWR(
+  const getGlobalStats = useSWR(
    ["stats", "GET", {}] as const,
    (args) => fetchApi(...args).then(handleResponse),
    { refreshInterval: 2_000 },
@ -16,13 +16,13 @@ export function StatsPage() {
        <span>Pixelsteps diffused</span>
        <Counter
          className="font-bold text-zinc-700 dark:text-zinc-300"
-          value={globalStats.data?.pixelStepCount ?? 0}
+          value={getGlobalStats.data?.pixelStepCount ?? 0}
          digits={15}
          transitionDurationMs={3_000}
        />
        <Counter
          className="text-base"
-          value={(globalStats.data?.pixelStepsPerMinute ?? 0) / 60}
+          value={(getGlobalStats.data?.pixelStepsPerMinute ?? 0) / 60}
          digits={9}
          transitionDurationMs={2_000}
          postfix="/s"
@ -32,13 +32,13 @@ export function StatsPage() {
        <span>Pixels painted</span>
        <Counter
          className="font-bold text-zinc-700 dark:text-zinc-300"
-          value={globalStats.data?.pixelCount ?? 0}
+          value={getGlobalStats.data?.pixelCount ?? 0}
          digits={15}
          transitionDurationMs={3_000}
        />
        <Counter
          className="text-base"
-          value={(globalStats.data?.pixelsPerMinute ?? 0) / 60}
+          value={(getGlobalStats.data?.pixelsPerMinute ?? 0) / 60}
          digits={9}
          transitionDurationMs={2_000}
          postfix="/s"
@ -49,13 +49,13 @@ export function StatsPage() {
          <span>Steps processed</span>
          <Counter
            className="font-bold text-zinc-700 dark:text-zinc-300"
-            value={globalStats.data?.stepCount ?? 0}
+            value={getGlobalStats.data?.stepCount ?? 0}
            digits={9}
            transitionDurationMs={3_000}
          />
          <Counter
            className="text-base"
-            value={(globalStats.data?.stepsPerMinute ?? 0) / 60}
+            value={(getGlobalStats.data?.stepsPerMinute ?? 0) / 60}
            digits={3}
            fractionDigits={3}
            transitionDurationMs={2_000}
@ -66,13 +66,13 @@ export function StatsPage() {
          <span>Images generated</span>
          <Counter
            className="font-bold text-zinc-700 dark:text-zinc-300"
-            value={globalStats.data?.imageCount ?? 0}
+            value={getGlobalStats.data?.imageCount ?? 0}
            digits={9}
            transitionDurationMs={3_000}
          />
          <Counter
            className="text-base"
-            value={(globalStats.data?.imagesPerMinute ?? 0) / 60}
+            value={(getGlobalStats.data?.imagesPerMinute ?? 0) / 60}
            digits={3}
            fractionDigits={3}
            transitionDurationMs={2_000}
@ -84,7 +84,7 @@ export function StatsPage() {
        <span>Unique users</span>
        <Counter
          className="font-bold text-zinc-700 dark:text-zinc-300"
-          value={globalStats.data?.userCount ?? 0}
+          value={getGlobalStats.data?.userCount ?? 0}
          digits={6}
          transitionDurationMs={1_500}
        />
--- a/ui/WorkersPage.tsx
+++ b/ui/WorkersPage.tsx
@ -1,27 +1,27 @@
-import React, { useRef } from "react";
+import React, { RefObject, useRef, useState } from "react";
 import { FormattedRelativeTime } from "react-intl";
 import useSWR, { useSWRConfig } from "swr";
 import { WorkerData } from "../api/workersRoute.ts";
 import { Counter } from "./Counter.tsx";
-import { fetchApi, handleResponse } from "./apiClient.tsx";
+import { fetchApi, handleResponse } from "./apiClient.ts";

-export function WorkersPage(props: { sessionId?: string }) {
+export function WorkersPage(props: { sessionId: string | null }) {
  const { sessionId } = props;

-  const createWorkerModalRef = useRef<HTMLDialogElement>(null);
+  const addDialogRef = useRef<HTMLDialogElement>(null);

-  const session = useSWR(
+  const getSession = useSWR(
    sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
    (args) => fetchApi(...args).then(handleResponse),
  );
-  const user = useSWR(
-    session.data?.userId
-      ? ["users/{userId}", "GET", { params: { userId: String(session.data.userId) } }] as const
+  const getUser = useSWR(
+    getSession.data?.userId
+      ? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
      : null,
    (args) => fetchApi(...args).then(handleResponse),
  );

-  const workers = useSWR(
+  const getWorkers = useSWR(
    ["workers", "GET", {}] as const,
    (args) => fetchApi(...args).then(handleResponse),
    { refreshInterval: 5000 },
@ -29,37 +29,63 @@ export function WorkersPage(props: { sessionId?: string }) {

  return (
    <>
-      <ul className="my-4 flex flex-col gap-2">
-        {workers.data?.map((worker) => (
-          <WorkerListItem key={worker.id} worker={worker} sessionId={sessionId} />
-        ))}
-      </ul>
-      {user.data?.isAdmin && (
+      {getWorkers.data?.length
+        ? (
+          <ul className="my-4 flex flex-col gap-2">
+            {getWorkers.data?.map((worker) => (
+              <WorkerListItem key={worker.id} worker={worker} sessionId={sessionId} />
+            ))}
+          </ul>
+        )
+        : getWorkers.data?.length === 0
+        ? <p>No workers</p>
+        : getWorkers.error
+        ? <p className="alert">Loading workers failed</p>
+        : <div className="spinner self-center" />}
+
+      {getUser.data?.admin && (
        <button
          className="button-filled"
-          onClick={() => createWorkerModalRef.current?.showModal()}
+          onClick={() => addDialogRef.current?.showModal()}
        >
          Add worker
        </button>
      )}
-      <dialog
-        className="dialog animate-pop-in backdrop-animate-fade-in"
-        ref={createWorkerModalRef}
-      >
-        <form
-          method="dialog"
-          className="flex flex-col gap-4 p-4"
-          onSubmit={(e) => {
-            e.preventDefault();
-            const data = new FormData(e.target as HTMLFormElement);
-            const key = data.get("key") as string;
-            const name = data.get("name") as string;
-            const sdUrl = data.get("url") as string;
-            const user = data.get("user") as string;
-            const password = data.get("password") as string;
-            console.log(key, name, user, password);
-            workers.mutate(async () => {
-              const worker = await fetchApi("workers", "POST", {
+
+      <AddWorkerDialog
+        dialogRef={addDialogRef}
+        sessionId={sessionId}
+      />
+    </>
+  );
+}
+
+function AddWorkerDialog(props: {
+  dialogRef: RefObject<HTMLDialogElement>;
+  sessionId: string | null;
+}) {
+  const { dialogRef, sessionId } = props;
+
+  const { mutate } = useSWRConfig();
+
+  return (
+    <dialog ref={dialogRef} className="dialog animate-pop-in backdrop-animate-fade-in">
+      <form
+        method="dialog"
+        className="flex flex-col gap-4 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          const data = new FormData(e.target as HTMLFormElement);
+          const key = data.get("key") as string;
+          const name = data.get("name") as string;
+          const sdUrl = data.get("url") as string;
+          const user = data.get("user") as string;
+          const password = data.get("password") as string;
+          console.log(key, name, user, password);
+          mutate(
+            (key) => Array.isArray(key) && key[0] === "workers",
+            async () =>
+              fetchApi("workers", "POST", {
                query: { sessionId: sessionId! },
                body: {
                  type: "application/json",
@ -70,113 +96,112 @@ export function WorkersPage(props: { sessionId?: string }) {
                    sdAuth: user && password ? { user, password } : null,
                  },
                },
-              }).then(handleResponse);
-              return [...(workers.data ?? []), worker];
-            });
-
-            createWorkerModalRef.current?.close();
-          }}
-        >
-          <div className="flex gap-4">
-            <label className="flex flex-1 flex-col items-stretch gap-1">
-              <span className="text-sm">
-                Key
-              </span>
-              <input
-                className="input-text"
-                type="text"
-                name="key"
-                required
-              />
-              <span className="text-sm text-zinc-500">
-                Used for counting statistics
-              </span>
-            </label>
-            <label className="flex flex-1 flex-col items-stretch gap-1">
-              <span className="text-sm">
-                Name
-              </span>
-              <input
-                className="input-text"
-                type="text"
-                name="name"
-              />
-              <span className="text-sm text-zinc-500">
-                Used for display
-              </span>
-            </label>
-          </div>
-          <label className="flex flex-col items-stretch gap-1">
+              }).then(handleResponse),
+            { populateCache: false },
+          );
+          dialogRef.current?.close();
+        }}
+      >
+        <div className="flex gap-4">
+          <label className="flex flex-1 flex-col items-stretch gap-1">
            <span className="text-sm">
-              URL
+              Key
            </span>
            <input
              className="input-text"
-              type="url"
-              name="url"
+              type="text"
+              name="key"
              required
-              pattern="https?://.*"
+            />
+            <span className="text-sm text-zinc-500">
+              Used for counting statistics
+            </span>
+          </label>
+          <label className="flex flex-1 flex-col items-stretch gap-1">
+            <span className="text-sm">
+              Name
+            </span>
+            <input
+              className="input-text"
+              type="text"
+              name="name"
+            />
+            <span className="text-sm text-zinc-500">
+              Used for display
+            </span>
+          </label>
+        </div>
+        <label className="flex flex-col items-stretch gap-1">
+          <span className="text-sm">
+            URL
+          </span>
+          <input
+            className="input-text"
+            type="url"
+            name="url"
+            required
+            pattern="https?://.*"
+          />
+        </label>
+        <div className="flex gap-4">
+          <label className="flex flex-1 flex-col items-stretch gap-1">
+            <span className="text-sm">
+              User
+            </span>
+            <input
+              className="input-text"
+              type="text"
+              name="user"
            />
          </label>
-          <div className="flex gap-4">
-            <label className="flex flex-1 flex-col items-stretch gap-1">
-              <span className="text-sm">
-                User
-              </span>
-              <input
-                className="input-text"
-                type="text"
-                name="user"
-              />
-            </label>
-            <label className="flex flex-1 flex-col items-stretch gap-1">
-              <span className="text-sm">
-                Password
-              </span>
-              <input
-                className="input-text"
-                type="password"
-                name="password"
-              />
-            </label>
-          </div>
+          <label className="flex flex-1 flex-col items-stretch gap-1">
+            <span className="text-sm">
+              Password
+            </span>
+            <input
+              className="input-text"
+              type="password"
+              name="password"
+            />
+          </label>
+        </div>

-          <div className="flex gap-2 items-center justify-end">
-            <button
-              type="button"
-              className="button-outlined"
-              onClick={() => createWorkerModalRef.current?.close()}
-            >
-              Close
-            </button>
-            <button type="submit" disabled={!sessionId} className="button-filled">
-              Save
-            </button>
-          </div>
-        </form>
-      </dialog>
-    </>
+        <div className="flex gap-2 items-center justify-end">
+          <button
+            type="button"
+            className="button-outlined"
+            onClick={() => dialogRef.current?.close()}
+          >
+            Close
+          </button>
+          <button type="submit" disabled={!sessionId} className="button-filled">
+            Save
+          </button>
+        </div>
+      </form>
+    </dialog>
  );
 }

-function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefined }) {
+function WorkerListItem(props: {
+  worker: WorkerData;
+  sessionId: string | null;
+}) {
  const { worker, sessionId } = props;
-  const editWorkerModalRef = useRef<HTMLDialogElement>(null);
-  const deleteWorkerModalRef = useRef<HTMLDialogElement>(null);
+  const editDialogRef = useRef<HTMLDialogElement>(null);
+  const deleteDialogRef = useRef<HTMLDialogElement>(null);

-  const session = useSWR(
+  const getSession = useSWR(
    sessionId ? ["sessions/{sessionId}", "GET", { params: { sessionId } }] as const : null,
    (args) => fetchApi(...args).then(handleResponse),
  );
-  const user = useSWR(
-    session.data?.userId
-      ? ["users/{userId}", "GET", { params: { userId: String(session.data.userId) } }] as const
+  const getUser = useSWR(
+    getSession.data?.userId
+      ? ["users/{userId}", "GET", { params: { userId: String(getSession.data.userId) } }] as const
      : null,
    (args) => fetchApi(...args).then(handleResponse),
  );

-  const { mutate } = useSWRConfig();
-
  return (
    <li className="flex flex-col gap-2 rounded-md bg-zinc-100 dark:bg-zinc-800 p-2">
      <p className="font-bold">
@ -212,119 +237,162 @@ function WorkerListItem(props: { worker: WorkerData; sessionId: string | undefin
        {" "}
        <Counter value={worker.stepsPerMinute} digits={3} /> steps per minute
      </p>
-      <p className="flex gap-2">
-        {user.data?.isAdmin && (
-          <>
-            <button
-              className="button-outlined"
-              onClick={() => editWorkerModalRef.current?.showModal()}
-            >
-              Settings
-            </button>
-            <button
-              className="button-outlined"
-              onClick={() => deleteWorkerModalRef.current?.showModal()}
-            >
-              Delete
-            </button>
-          </>
-        )}
-      </p>
-      <dialog
-        className="dialog animate-pop-in backdrop-animate-fade-in"
-        ref={editWorkerModalRef}
-      >
-        <form
-          method="dialog"
-          className="flex flex-col gap-4 p-4"
-          onSubmit={(e) => {
-            e.preventDefault();
-            const data = new FormData(e.target as HTMLFormElement);
-            const user = data.get("user") as string;
-            const password = data.get("password") as string;
-            console.log(user, password);
-            fetchApi("workers/{workerId}", "PATCH", {
-              params: { workerId: worker.id },
-              query: { sessionId: sessionId! },
-              body: {
-                type: "application/json",
-                data: {
-                  sdAuth: user && password ? { user, password } : null,
-                },
-              },
-            });
-            editWorkerModalRef.current?.close();
-          }}
-        >
-          <div className="flex gap-4">
-            <label className="flex flex-1 flex-col items-stretch gap-1">
-              <span className="text-sm">
-                User
-              </span>
-              <input
-                className="input-text"
-                type="text"
-                name="user"
-              />
-            </label>
-            <label className="flex flex-1 flex-col items-stretch gap-1">
-              <span className="text-sm">
-                Password
-              </span>
-              <input
-                className="input-text"
-                type="password"
-                name="password"
-              />
-            </label>
-          </div>
-          <div className="flex gap-2 items-center justify-end">
-            <button
-              type="button"
-              className="button-outlined"
-              onClick={() => editWorkerModalRef.current?.close()}
-            >
-              Close
-            </button>
-            <button type="submit" disabled={!sessionId} className="button-filled">
-              Save
-            </button>
-          </div>
-        </form>
-      </dialog>
-      <dialog
-        className="dialog animate-pop-in backdrop-animate-fade-in"
-        ref={deleteWorkerModalRef}
-      >
-        <form
-          method="dialog"
-          className="flex flex-col gap-4 p-4"
-          onSubmit={(e) => {
-            e.preventDefault();
-            fetchApi("workers/{workerId}", "DELETE", {
-              params: { workerId: worker.id },
-              query: { sessionId: sessionId! },
-            }).then(handleResponse).then(() => mutate(["workers", "GET", {}]));
-            deleteWorkerModalRef.current?.close();
-          }}
-        >
-          <p>
-            Are you sure you want to delete this worker?
-          </p>
-          <div className="flex gap-2 items-center justify-end">
-            <button
-              type="button"
-              className="button-outlined"
-              onClick={() => deleteWorkerModalRef.current?.close()}
-            >
-              Close
-            </button>
-            <button type="submit" disabled={!sessionId} className="button-filled">
-              Delete
-            </button>
-          </div>
-        </form>
-      </dialog>
+      {getUser.data?.admin && (
+        <p className="flex gap-2">
+          <button
+            className="button-outlined"
+            onClick={() => editDialogRef.current?.showModal()}
+          >
+            Settings
+          </button>
+          <button
+            className="button-outlined"
+            onClick={() => deleteDialogRef.current?.showModal()}
+          >
+            Delete
+          </button>
+        </p>
+      )}
+      <EditWorkerDialog
+        dialogRef={editDialogRef}
+        workerId={worker.id}
+        sessionId={sessionId}
+      />
+      <DeleteWorkerDialog
+        dialogRef={deleteDialogRef}
+        workerId={worker.id}
+        sessionId={sessionId}
+      />
    </li>
  );
 }
+
+function EditWorkerDialog(props: {
+  dialogRef: RefObject<HTMLDialogElement>;
+  workerId: string;
+  sessionId: string | null;
+}) {
+  const { dialogRef, workerId, sessionId } = props;
+
+  const { mutate } = useSWRConfig();
+
+  return (
+    <dialog
+      className="dialog animate-pop-in backdrop-animate-fade-in"
+      ref={dialogRef}
+    >
+      <form
+        method="dialog"
+        className="flex flex-col gap-4 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          const data = new FormData(e.target as HTMLFormElement);
+          const user = data.get("user") as string;
+          const password = data.get("password") as string;
+          console.log(user, password);
+          mutate(
+            (key) => Array.isArray(key) && key[0] === "workers",
+            async () =>
+              fetchApi("workers/{workerId}", "PATCH", {
+                params: { workerId: workerId },
+                query: { sessionId: sessionId! },
+                body: {
+                  type: "application/json",
+                  data: {
+                    sdAuth: user && password ? { user, password } : null,
+                  },
+                },
+              }).then(handleResponse),
+            { populateCache: false },
+          );
+          dialogRef.current?.close();
+        }}
+      >
+        <div className="flex gap-4">
+          <label className="flex flex-1 flex-col items-stretch gap-1">
+            <span className="text-sm">
+              User
+            </span>
+            <input
+              className="input-text"
+              type="text"
+              name="user"
+            />
+          </label>
+          <label className="flex flex-1 flex-col items-stretch gap-1">
+            <span className="text-sm">
+              Password
+            </span>
+            <input
+              className="input-text"
+              type="password"
+              name="password"
+            />
+          </label>
+        </div>
+        <div className="flex gap-2 items-center justify-end">
+          <button
+            type="button"
+            className="button-outlined"
+            onClick={() => dialogRef.current?.close()}
+          >
+            Close
+          </button>
+          <button type="submit" disabled={!sessionId} className="button-filled">
+            Save
+          </button>
+        </div>
+      </form>
+    </dialog>
+  );
+}
+
+function DeleteWorkerDialog(props: {
+  dialogRef: RefObject<HTMLDialogElement>;
+  workerId: string;
+  sessionId: string | null;
+}) {
+  const { dialogRef, workerId, sessionId } = props;
+  const { mutate } = useSWRConfig();
+
+  return (
+    <dialog
+      className="dialog animate-pop-in backdrop-animate-fade-in"
+      ref={dialogRef}
+    >
+      <form
+        method="dialog"
+        className="flex flex-col gap-4 p-4"
+        onSubmit={(e) => {
+          e.preventDefault();
+          mutate(
+            (key) => Array.isArray(key) && key[0] === "workers",
+            async () =>
+              fetchApi("workers/{workerId}", "DELETE", {
+                params: { workerId: workerId },
+                query: { sessionId: sessionId! },
+              }).then(handleResponse),
+            { populateCache: false },
+          );
+          dialogRef.current?.close();
+        }}
+      >
+        <p>
+          Are you sure you want to delete this worker?
+        </p>
+        <div className="flex gap-2 items-center justify-end">
+          <button
+            type="button"
+            className="button-outlined"
+            onClick={() => dialogRef.current?.close()}
+          >
+            Close
+          </button>
+          <button type="submit" disabled={!sessionId} className="button-filled">
+            Delete
+          </button>
+        </div>
+      </form>
+    </dialog>
+  );
+}
--- a/ui/apiClient.tsx
+++ b/ui/apiClient.tsx
--- a/ui/twind.ts
+++ b/ui/twind.ts
@ -3,9 +3,10 @@ import presetTailwind from "twind/preset-tailwind";

 const twConfig = defineConfig({
  presets: [presetTailwind()],
+  hash: false,
 });

-install(twConfig);
+install(twConfig, false);

 injectGlobal`
  @layer base {
@ -89,6 +90,10 @@ injectGlobal`
      @apply h-8 w-8 animate-spin rounded-full border-4 border-transparent border-t-current;
    }

+    .alert {
+      @apply px-4 py-2 flex gap-2 items-center bg-red-500 text-white rounded-sm shadow-md;
+    }
+
    .button-filled {
      @apply rounded-md bg-sky-600 px-3 py-2 min-h-12
        text-sm font-semibold uppercase tracking-wider text-white shadow-sm transition-all 
@ -111,7 +116,7 @@ injectGlobal`
    }

    .tab {
-      @apply inline-flex items-center px-4 text-sm text-center bg-transparent border-b-2 sm:text-base whitespace-nowrap focus:outline-none
+      @apply inline-flex items-center px-4 text-sm text-center bg-transparent border-b-2 sm:text-base whitespace-nowrap outline-none
        border-transparent dark:text-white cursor-base hover:border-zinc-400 focus:border-zinc-400 transition-all;
    }

@ -131,8 +136,8 @@ injectGlobal`
    }

    .dialog {
-      @apply overflow-hidden overflow-y-auto rounded-md 
-        bg-zinc-100 text-zinc-900 shadow-lg backdrop:bg-black/30 dark:bg-zinc-800 dark:text-zinc-100;
+      @apply overflow-hidden overflow-y-auto rounded-md shadow-xl
+        bg-white text-zinc-900 shadow-lg backdrop:bg-black/30 dark:bg-zinc-800 dark:text-zinc-100;
    }
  }
 `;
--- a/ui/useLocalStorage.ts
+++ b/ui/useLocalStorage.ts
@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export function useLocalStorage(key: string) {
+  const [value, setValue] = useState(() => window.localStorage.getItem(key));
+
+  useEffect(() => {
+    console.log(key, value);
+    if (value != null) {
+      window.localStorage.setItem(key, value);
+    } else {
+      window.localStorage.removeItem(key);
+    }
+  }, [key, value]);
+
+  useEffect(() => {
+    const handleStorage = (event: StorageEvent) => {
+      if (event.key === key) {
+        console.log(key, event.newValue);
+        setValue(event.newValue);
+      }
+    };
+
+    window.addEventListener("storage", handleStorage);
+
+    return () => {
+      window.removeEventListener("storage", handleStorage);
+    };
+  }, [key]);
+
+  return [value, setValue] as const;
+}