@pablozaiden/webapp 0.2.0 → 0.2.1

package/src/server/create-web-app-server.ts

@@ -1,4 +1,4 @@
-import type { Server } from "bun";
+import type { Server, ServerWebSocket, WebSocketHandler } from "bun";
 import type { CurrentUser, LogLevelName, ThemePreference, WebAppConfigResponse, WebAppUserRole } from "../contracts";
 import { authenticateApiKey, assertScopes, createApiKey, deleteApiKey, listApiKeys } from "./auth/api-keys";
 import {
@@ -50,6 +50,8 @@ export interface WebAppServerConfig<TEvent = unknown> {
   version?: string;
   store?: WebAppStore;
   routes?: RouteTable<TEvent>;
+  publicRoutes?: Record<string, PublicRouteDefinition>;
+  websockets?: Record<string, Partial<WebSocketHandler<WebAppWebSocketData>>>;
   auth?: {
     passkeys?: boolean | { rpName?: string; userName?: string; userDisplayName?: string };
     apiKeys?: boolean;
@@ -60,6 +62,24 @@ export interface WebAppServerConfig<TEvent = unknown> {
   };
 }
 
+export const WEBAPP_SOCKET_HANDLER = "webappSocketHandler";
+
+export type WebAppWebSocketData = WebSocketData & {
+  webappSocketHandler?: string;
+  [key: string]: unknown;
+};
+
+export type PublicRouteAsset = Response | Blob | ArrayBuffer | Uint8Array | string;
+export type PublicRouteHandler = (req: Request) => PublicRouteAsset | undefined | Promise<PublicRouteAsset | undefined>;
+export type PublicRouteValue = PublicRouteAsset | PublicRouteHandler;
+export type PublicRouteDefinition =
+  | PublicRouteValue
+  | {
+      GET?: PublicRouteValue;
+      HEAD?: PublicRouteValue;
+      headers?: HeadersInit;
+    };
+
 export interface WebAppServer<TEvent = unknown> {
   config: RuntimeConfig;
   store: WebAppStore;
@@ -127,6 +147,20 @@ function htmlResponse(index: unknown): Response {
   return index as Response;
 }
 
+function publicAssetResponse(asset: PublicRouteAsset, extraHeaders?: HeadersInit): Response {
+  const response = asset instanceof Response
+    ? asset
+    : typeof asset === "string"
+      ? new Response(asset, { headers: { "content-type": "text/plain; charset=utf-8" } })
+      : new Response(asset as BodyInit);
+  if (extraHeaders) {
+    for (const [name, value] of new Headers(extraHeaders)) {
+      response.headers.set(name, value);
+    }
+  }
+  return withSecurityHeaders(response);
+}
+
 function secureDynamicResponse(response: Response): Response {
   return response instanceof Response ? withSecurityHeaders(response) : response;
 }
@@ -245,6 +279,8 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
   const version = input.version ?? "0.0.0-development";
   const wsPath = input.realtime?.path ?? "/api/ws";
   const routes = input.routes ?? {};
+  const publicRoutes = input.publicRoutes ?? {};
+  const appWebsockets = input.websockets ?? {};
   const passkeysEnabled = input.auth?.passkeys !== false;
   const apiKeysEnabled = input.auth?.apiKeys ?? false;
   const deviceAuthEnabled = input.auth?.deviceAuth ?? false;
@@ -624,78 +660,123 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
     return undefined;
   }
 
-  async function handleRequest(req: Request, server?: Server<WebSocketData>): Promise<Response | undefined> {
+  async function handlePublicRoute(req: Request): Promise<Response | undefined> {
+    const url = new URL(req.url);
+    const route = publicRoutes[url.pathname];
+    if (!route) {
+      return undefined;
+    }
+    const methodName = req.method === "HEAD" ? "HEAD" : req.method === "GET" ? "GET" : undefined;
+    if (!methodName) {
+      return withSecurityHeaders(methodNotAllowed());
+    }
+    const definition = typeof route === "object" && route !== null && !(route instanceof Response) && !(route instanceof Blob) && !(route instanceof ArrayBuffer) && !(route instanceof Uint8Array) && ("GET" in route || "HEAD" in route || "headers" in route)
+      ? route
+      : undefined;
+    const value = definition ? definition[methodName] ?? (methodName === "HEAD" ? definition.GET : undefined) : route as PublicRouteValue;
+    if (!value) {
+      return withSecurityHeaders(methodNotAllowed());
+    }
+    const asset = typeof value === "function" ? await value(req) : value;
+    if (!asset) {
+      return withSecurityHeaders(notFound());
+    }
+    const response = publicAssetResponse(asset, definition?.headers);
+    if (req.method === "HEAD") {
+      return new Response(null, { status: response.status, statusText: response.statusText, headers: response.headers });
+    }
+    return response;
+  }
+
+  async function handleMatchedRoute(req: Request, matched: NonNullable<ReturnType<typeof matchRoute<TEvent>>>, server?: Server<WebAppWebSocketData>): Promise<Response | undefined> {
+    const handler = matched.route[method(req) ?? "GET"];
+    if (!handler) {
+      return withSecurityHeaders(methodNotAllowed());
+    }
+    const routeAuth = matched.route.auth ?? "required";
+    const required = requiresAuth(routeAuth);
+    const auth = await authorize(req, required);
+    if (auth instanceof Response) {
+      return withSecurityHeaders(auth);
+    }
+    try {
+      enforceRouteAuth(routeAuth, auth);
+      if (matched.route.userParam) {
+        const paramValue = matched.params[matched.route.userParam];
+        if (!paramValue) {
+          throw new AuthError("route_misconfigured", `Route userParam "${matched.route.userParam}" is missing from matched params`, 500);
+        }
+        assertUser(auth, paramValue);
+      }
+      if (routeAuth !== "public" && (auth.kind === "api-key" || auth.kind === "bearer")) {
+        assertScopes(auth.kind === "api-key" ? auth.scopes : scopesFromBearer(auth.claims), matched.route.scopes ?? []);
+      }
+    } catch (error) {
+      return withSecurityHeaders(authErrorResponse(error));
+    }
+    const current = () => requireUser(auth);
+    const userRealtime = {
+      publishChanged: (resource, options = {}) => realtime.publishChanged(resource, { ...options, target: { ...options.target, userId: current().id } }),
+      publishEntityChanged: (resource, id, options = {}) => realtime.publishEntityChanged(resource, id, { ...options, target: { ...options.target, userId: current().id } }),
+      publishDeleted: (resource, id, options = {}) => realtime.publishDeleted(resource, id, { ...options, target: { ...options.target, userId: current().id } }),
+      publishSettingsChanged: (options = {}) => realtime.publishSettingsChanged({ ...options, target: { ...options.target, userId: current().id } }),
+    } satisfies UserScopedRealtimePublisher<TEvent>;
+    const originFailure = checkSameOrigin(req, config, auth, matched.route.sameOrigin ?? "mutations");
+    if (originFailure) {
+      return withSecurityHeaders(originFailure);
+    }
+    try {
+      const response = await handler(req, {
+        params: matched.params,
+        auth,
+        user: currentUser(auth),
+        requireUser: () => requireUser(auth),
+        requireAdmin: () => requireAdmin(auth),
+        requireOwner: () => requireOwner(auth),
+        assertUser: (userId) => assertUser(auth, userId),
+        filterOwned: createFilterOwned(auth),
+        requireOwned: createRequireOwned(auth),
+        realtime,
+        userRealtime,
+        server,
+      });
+      return response ? withSecurityHeaders(response) : undefined;
+    } catch (error) {
+      return withSecurityHeaders(routeHandlerErrorResponse(error));
+    }
+  }
+
+  async function handleRequest(req: Request, server?: Server<WebAppWebSocketData>): Promise<Response | undefined> {
     const url = new URL(req.url);
+    const publicRoute = await handlePublicRoute(req);
+    if (publicRoute) {
+      return publicRoute;
+    }
+    const matched = matchRoute(routes, url.pathname);
     if (url.pathname.startsWith("/api/") || url.pathname.startsWith("/.well-known/") || url.pathname === "/device") {
       const builtIn = await handleBuiltIn(req, server);
       if (builtIn) {
         return secureDynamicResponse(builtIn);
       }
-      const matched = matchRoute(routes, url.pathname);
       if (!matched) {
         return withSecurityHeaders(notFound());
       }
-      const handler = matched.route[method(req) ?? "GET"];
-      if (!handler) {
-        return withSecurityHeaders(methodNotAllowed());
-      }
-      const routeAuth = matched.route.auth ?? "required";
-      const required = requiresAuth(routeAuth);
-      const auth = await authorize(req, required);
-      if (auth instanceof Response) {
-        return withSecurityHeaders(auth);
-      }
-      try {
-        enforceRouteAuth(routeAuth, auth);
-        if (matched.route.userParam) {
-          const paramValue = matched.params[matched.route.userParam];
-          if (!paramValue) {
-            throw new AuthError("route_misconfigured", `Route userParam "${matched.route.userParam}" is missing from matched params`, 500);
-          }
-          assertUser(auth, paramValue);
-        }
-        if (routeAuth !== "public" && (auth.kind === "api-key" || auth.kind === "bearer")) {
-          assertScopes(auth.kind === "api-key" ? auth.scopes : scopesFromBearer(auth.claims), matched.route.scopes ?? []);
-        }
-      } catch (error) {
-        return withSecurityHeaders(authErrorResponse(error));
-      }
-      const current = () => requireUser(auth);
-      const userRealtime = {
-        publishChanged: (resource, options = {}) => realtime.publishChanged(resource, { ...options, target: { ...options.target, userId: current().id } }),
-        publishEntityChanged: (resource, id, options = {}) => realtime.publishEntityChanged(resource, id, { ...options, target: { ...options.target, userId: current().id } }),
-        publishDeleted: (resource, id, options = {}) => realtime.publishDeleted(resource, id, { ...options, target: { ...options.target, userId: current().id } }),
-        publishSettingsChanged: (options = {}) => realtime.publishSettingsChanged({ ...options, target: { ...options.target, userId: current().id } }),
-      } satisfies UserScopedRealtimePublisher<TEvent>;
-      const originFailure = checkSameOrigin(req, config, auth, matched.route.sameOrigin ?? "mutations");
-      if (originFailure) {
-        return withSecurityHeaders(originFailure);
-      }
-      try {
-        return withSecurityHeaders(await handler(req, {
-          params: matched.params,
-          auth,
-          user: currentUser(auth),
-          requireUser: () => requireUser(auth),
-          requireAdmin: () => requireAdmin(auth),
-          requireOwner: () => requireOwner(auth),
-          assertUser: (userId) => assertUser(auth, userId),
-          filterOwned: createFilterOwned(auth),
-          requireOwned: createRequireOwned(auth),
-          realtime,
-          userRealtime,
-          server,
-        }));
-      } catch (error) {
-        return withSecurityHeaders(routeHandlerErrorResponse(error));
-      }
+      return handleMatchedRoute(req, matched, server);
+    }
+    if (matched) {
+      return handleMatchedRoute(req, matched, server);
     }
     return htmlResponse(input.index);
   }
 
-  function start(): Server<WebSocketData> {
-    const dynamicHandler = (req: Request, server: Server<WebSocketData>) => handleRequest(req, server);
-    const server = Bun.serve<WebSocketData>({
+  function customHandler(socket: ServerWebSocket<WebAppWebSocketData>): Partial<WebSocketHandler<WebAppWebSocketData>> | undefined {
+    const handlerName = socket.data.webappSocketHandler;
+    return handlerName ? appWebsockets[handlerName] : undefined;
+  }
+
+  function start(): Server<WebAppWebSocketData> {
+    const dynamicHandler = (req: Request, server: Server<WebAppWebSocketData>) => handleRequest(req, server);
+    const server = Bun.serve<WebAppWebSocketData>({
       hostname: config.host,
       port: config.port,
       routes: {
@@ -707,16 +788,34 @@ export function createWebAppServer<TEvent = unknown>(input: WebAppServerConfig<T
       },
       websocket: {
         open(socket) {
+          const handler = customHandler(socket);
+          if (handler?.open) {
+            handler.open(socket);
+            return;
+          }
           realtime.add(socket);
         },
         message(socket, message) {
+          const handler = customHandler(socket);
+          if (handler?.message) {
+            handler.message(socket, message);
+            return;
+          }
           if (message === "ping") {
             socket.send(JSON.stringify({ type: "pong" }));
           }
         },
-        close(socket) {
+        close(socket, code, reason) {
+          const handler = customHandler(socket);
+          if (handler?.close) {
+            handler.close(socket, code, reason);
+            return;
+          }
           realtime.remove(socket);
         },
+        drain(socket) {
+          customHandler(socket)?.drain?.(socket);
+        },
       },
       development: config.development,
     });

package/src/server/index.ts

@@ -1,5 +1,6 @@
 export * from "./runtime-config";
 export * from "./routes";
+export * from "./route-catalog";
 export * from "./responses";
 export * from "./create-web-app-server";
 export * from "./auth/store";

package/src/server/route-catalog.ts

@@ -0,0 +1,147 @@
+import type { HttpMethod, RouteAuth, RouteDefinition, RouteTable, SameOriginMode } from "./routes";
+
+const HTTP_METHODS: HttpMethod[] = ["GET", "POST", "PUT", "PATCH", "DELETE"];
+
+export interface RouteCatalogEntry {
+  path: string;
+  cliPath: string;
+  methods: HttpMethod[];
+  auth: RouteAuth;
+  sameOrigin: SameOriginMode;
+  scopes: string[];
+  description?: string;
+  tags: string[];
+  requestSchema?: unknown;
+  querySchema?: unknown;
+  responseSchema?: unknown;
+}
+
+export interface RouteCatalogMatch {
+  entry: RouteCatalogEntry;
+  path: string;
+  params: Record<string, string>;
+}
+
+function trimSlashes(value: string): string {
+  return value.replace(/^\/+|\/+$/g, "");
+}
+
+function defaultCliPath(path: string): string {
+  return trimSlashes(path.startsWith("/api/") ? path.slice("/api/".length) : path);
+}
+
+function methodsFor(route: RouteDefinition): HttpMethod[] {
+  return HTTP_METHODS.filter((method) => typeof route[method] === "function");
+}
+
+export function createRouteCatalog<TEvent = unknown>(routes: RouteTable<TEvent>): RouteCatalogEntry[] {
+  return Object.entries(routes)
+    .filter(([, route]) => route.catalog !== false)
+    .map(([path, route]) => ({
+      path,
+      cliPath: route.cliPath ?? defaultCliPath(path),
+      methods: methodsFor(route),
+      auth: route.auth ?? "required",
+      sameOrigin: route.sameOrigin ?? "mutations",
+      scopes: route.scopes ?? [],
+      description: route.description,
+      tags: route.tags ?? [],
+      requestSchema: route.requestSchema,
+      querySchema: route.querySchema,
+      responseSchema: route.responseSchema,
+    }))
+    .filter((entry) => entry.methods.length > 0)
+    .sort((left, right) => left.path.localeCompare(right.path));
+}
+
+function normalizeApiPath(input: string): string {
+  const [path = ""] = input.trim().split(/[?#]/);
+  if (!path) {
+    throw new Error("API endpoint is required");
+  }
+  if (path.startsWith("/api/") || path === "/api") {
+    return path;
+  }
+  if (path.startsWith("api/")) {
+    return `/${path}`;
+  }
+  if (path.startsWith("/")) {
+    return path;
+  }
+  return `/api/${path}`;
+}
+
+function normalizeCliPath(input: string): string {
+  const [path = ""] = input.trim().split(/[?#]/);
+  return trimSlashes(path.startsWith("/api/") ? path.slice("/api/".length) : path);
+}
+
+function decodePathPart(value: string): string | undefined {
+  try {
+    return decodeURIComponent(value);
+  } catch {
+    return undefined;
+  }
+}
+
+function matchPattern(pattern: string, value: string): Record<string, string> | undefined {
+  const patternParts = trimSlashes(pattern).split("/").filter(Boolean);
+  const valueParts = trimSlashes(value).split("/").filter(Boolean);
+  if (patternParts.length !== valueParts.length) {
+    return undefined;
+  }
+  const params: Record<string, string> = {};
+  for (let index = 0; index < patternParts.length; index += 1) {
+    const patternPart = patternParts[index]!;
+    const valuePart = valueParts[index]!;
+    if (patternPart.startsWith(":")) {
+      const decoded = decodePathPart(valuePart);
+      if (decoded === undefined) {
+        return undefined;
+      }
+      params[patternPart.slice(1)] = decoded;
+      continue;
+    }
+    if (patternPart !== valuePart) {
+      return undefined;
+    }
+  }
+  return params;
+}
+
+function concretePath(pattern: string, params: Record<string, string>): string {
+  return trimSlashes(pattern)
+    .split("/")
+    .map((part) => part.startsWith(":") ? encodeURIComponent(params[part.slice(1)] ?? "") : part)
+    .join("/")
+    .replace(/^/, "/");
+}
+
+function specificity(entry: RouteCatalogEntry): number {
+  return entry.path.split("/").reduce((score, part) => score + (part && !part.startsWith(":") ? 2 : 1), 0);
+}
+
+export function findRouteCatalogEntry(catalog: readonly RouteCatalogEntry[], input: string): RouteCatalogMatch | undefined {
+  const apiPath = normalizeApiPath(input);
+  const cliPath = normalizeCliPath(input);
+  const sorted = [...catalog].sort((left, right) => specificity(right) - specificity(left));
+  for (const entry of sorted) {
+    if (entry.path === apiPath) {
+      return { entry, path: apiPath, params: {} };
+    }
+    if (entry.cliPath === cliPath) {
+      return { entry, path: entry.path, params: {} };
+    }
+  }
+  for (const entry of sorted) {
+    const apiParams = matchPattern(entry.path, apiPath);
+    if (apiParams) {
+      return { entry, path: apiPath, params: apiParams };
+    }
+    const cliParams = matchPattern(entry.cliPath, cliPath);
+    if (cliParams) {
+      return { entry, path: concretePath(entry.path, cliParams), params: cliParams };
+    }
+  }
+  return undefined;
+}

package/src/server/routes.ts

@@ -36,14 +36,24 @@ export interface RouteContext<TParams extends Record<string, string> = Record<st
 export type WebAppRouteHandler<TParams extends Record<string, string> = Record<string, string>, TEvent = unknown> = (
   req: Request,
   ctx: RouteContext<TParams, TEvent>,
-) => Response | Promise<Response>;
+) => Response | undefined | Promise<Response | undefined>;
+
+export interface RouteMetadata {
+  description?: string;
+  cliPath?: string;
+  tags?: string[];
+  requestSchema?: unknown;
+  querySchema?: unknown;
+  responseSchema?: unknown;
+  catalog?: boolean;
+}
 
 export type RouteDefinition<TEvent = unknown> = {
   auth?: RouteAuth;
   sameOrigin?: SameOriginMode;
   scopes?: string[];
   userParam?: string;
-} & Partial<Record<HttpMethod, WebAppRouteHandler<Record<string, string>, TEvent>>>;
+} & RouteMetadata & Partial<Record<HttpMethod, WebAppRouteHandler<Record<string, string>, TEvent>>>;
 
 export type RouteTable<TEvent = unknown> = Record<string, RouteDefinition<TEvent>>;
 

package/src/web/WebAppRoot.tsx

@@ -487,6 +487,7 @@ function UserManagement({ config }: { config: WebAppConfigResponse }) {
   const [username, setUsername] = useState("");
   const [role, setRole] = useState<WebAppUserRole>("user");
   const [setupLink, setSetupLink] = useState<string>();
+  const [userToDelete, setUserToDelete] = useState<WebAppUserSummary>();
   const [error, setError] = useState<string>();
 
   const refreshUsers = useCallback(async () => {
@@ -535,6 +536,7 @@ function UserManagement({ config }: { config: WebAppConfigResponse }) {
     try {
       setError(undefined);
       await json(`/api/users/${encodeURIComponent(user.id)}`, { method: "DELETE" });
+      setUserToDelete(undefined);
       await refreshUsers();
     } catch (err) {
       setError(err instanceof Error ? err.message : String(err));
@@ -575,23 +577,73 @@ function UserManagement({ config }: { config: WebAppConfigResponse }) {
                 </select>
               ) : <Badge variant="success">Owner</Badge>}
               {user.role !== "owner" ? <Button type="button" onClick={() => void resetUser(user)}>Reset</Button> : null}
-              <Button type="button" variant="danger" disabled={user.role === "owner"} onClick={() => void deleteUser(user)}>Delete</Button>
+              <Button type="button" variant="danger" disabled={user.role === "owner"} onClick={() => setUserToDelete(user)}>Delete</Button>
             </div>
           </div>
         ))}
       </div>
+      <ConfirmDialog
+        open={Boolean(userToDelete)}
+        title="Delete user?"
+        message={userToDelete ? `This permanently deletes "${userToDelete.username}" and revokes their setup links, API keys, passkeys and device sessions.` : ""}
+        confirmLabel="Delete user"
+        danger
+        onCancel={() => setUserToDelete(undefined)}
+        onConfirm={() => userToDelete && void deleteUser(userToDelete)}
+      />
     </FormSection>
   );
 }
 
+const KILL_SERVER_COUNTDOWN_SECONDS = 15;
+
+function computeProgressPercent(countdown: number, total: number): number {
+  return total <= 0 ? 0 : (countdown / total) * 100;
+}
+
+function useCountdownReload(active: boolean, onComplete: () => void, durationSeconds = KILL_SERVER_COUNTDOWN_SECONDS): { countdown: number; progressPercent: number } {
+  const [countdown, setCountdown] = useState(durationSeconds);
+
+  useEffect(() => {
+    if (!active) {
+      setCountdown(durationSeconds);
+      return;
+    }
+
+    setCountdown(durationSeconds);
+    const interval = window.setInterval(() => {
+      setCountdown((previous) => {
+        const next = previous - 1;
+        if (next <= 0) {
+          window.clearInterval(interval);
+          onComplete();
+          return 0;
+        }
+        return next;
+      });
+    }, 1000);
+
+    return () => window.clearInterval(interval);
+  }, [active, durationSeconds, onComplete]);
+
+  return {
+    countdown,
+    progressPercent: computeProgressPercent(countdown, durationSeconds),
+  };
+}
+
 function SettingsView({ config, refresh, customSections, theme, setTheme }: { config: WebAppConfigResponse; refresh: () => Promise<void>; customSections: SettingsSection[]; theme: ThemePreference; setTheme: (theme: ThemePreference) => void }) {
   const [apiKeys, setApiKeys] = useState<ApiKeySummary[]>([]);
   const [authSessions, setAuthSessions] = useState<AuthSessionSummary[]>([]);
   const [createdToken, setCreatedToken] = useState<string>();
   const [apiKeyToDelete, setApiKeyToDelete] = useState<ApiKeySummary>();
+  const [authSessionToRevoke, setAuthSessionToRevoke] = useState<AuthSessionSummary>();
   const [confirmDeletePasskey, setConfirmDeletePasskey] = useState(false);
+  const [confirmKillServer, setConfirmKillServer] = useState(false);
   const [killRequested, setKillRequested] = useState(false);
   const [error, setError] = useState<string>();
+  const reloadPage = useCallback(() => window.location.reload(), []);
+  const { countdown, progressPercent } = useCountdownReload(killRequested, reloadPage);
 
   const refreshApiKeys = useCallback(async () => {
     if (config.apiKeys.enabled) {
@@ -648,10 +700,25 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
     await refresh();
   }
 
+  async function revokeAuthSession(session: AuthSessionSummary) {
+    try {
+      setError(undefined);
+      await json(`/api/auth/sessions/${session.id}`, { method: "DELETE" });
+      setAuthSessionToRevoke(undefined);
+      await refreshAuthSessions();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }
+
   async function killServer() {
+    setError(undefined);
+    setConfirmKillServer(false);
+    const response = await fetch("/api/server/kill", { method: "POST" });
+    if (!response.ok) {
+      throw new Error("Failed to kill server. Please try again.");
+    }
     setKillRequested(true);
-    await fetch("/api/server/kill", { method: "POST" });
-    setTimeout(() => window.location.reload(), 3500);
   }
 
   return (
@@ -729,7 +796,7 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
               {authSessions.length ? authSessions.map((session) => (
                 <div className="wapp-list-row" key={session.id}>
                   <span><strong>{session.clientId}</strong><small>{session.scope} · {session.active ? "active" : "inactive"} · {session.updatedAt}</small></span>
-                  <Button type="button" variant="danger" disabled={!session.active} onClick={() => void json(`/api/auth/sessions/${session.id}`, { method: "DELETE" }).then(refreshAuthSessions)}>Revoke</Button>
+                  <Button type="button" variant="danger" disabled={!session.active} onClick={() => setAuthSessionToRevoke(session)}>Revoke</Button>
                 </div>
               )) : <EmptyState title="No device sessions" />}
             </div>
@@ -741,8 +808,23 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
 
       {config.currentUser?.isAdmin ? (
         <FormSection title="Server operations">
-          {killRequested ? <p className="wapp-notice">Server is shutting down. Reloading soon...</p> : null}
-          <Button type="button" variant="danger" onClick={() => void killServer().catch((err) => setError(String(err)))}>Kill server</Button>
+          <div className="wapp-settings-row">
+            <div>
+              <strong>Kill server</strong>
+              <p>Stop the server process. If your deployment restarts it automatically, the app will come back after a moment.</p>
+              {killRequested ? (
+                <div className="wapp-shutdown-countdown" aria-live="polite">
+                  <div className="wapp-shutdown-message">Server is shutting down... Reloading in {countdown}s</div>
+                  <div className="wapp-shutdown-progress" aria-hidden="true">
+                    <div className="wapp-shutdown-progress-bar" style={{ width: `${progressPercent}%` }} />
+                  </div>
+                </div>
+              ) : null}
+            </div>
+            <div className="wapp-row-actions">
+              <Button type="button" variant="danger" disabled={killRequested} onClick={() => setConfirmKillServer(true)}>Kill server</Button>
+            </div>
+          </div>
         </FormSection>
       ) : null}
 
@@ -765,6 +847,24 @@ function SettingsView({ config, refresh, customSections, theme, setTheme }: { co
         onConfirm={() => apiKeyToDelete && void deleteKey(apiKeyToDelete.id)}
       />
       <ConfirmDialog open={confirmDeletePasskey} title="Delete passkey?" message="This removes the configured passkey and invalidates browser sessions." confirmLabel="Delete passkey" danger onCancel={() => setConfirmDeletePasskey(false)} onConfirm={() => void deleteConfiguredPasskey()} />
+      <ConfirmDialog
+        open={Boolean(authSessionToRevoke)}
+        title="Revoke device session?"
+        message={authSessionToRevoke ? `This revokes the active "${authSessionToRevoke.clientId}" refresh-token session.` : ""}
+        confirmLabel="Revoke session"
+        danger
+        onCancel={() => setAuthSessionToRevoke(undefined)}
+        onConfirm={() => authSessionToRevoke && void revokeAuthSession(authSessionToRevoke)}
+      />
+      <ConfirmDialog
+        open={confirmKillServer}
+        title="Kill server?"
+        message="Are you sure you want to kill the server?"
+        confirmLabel="Kill server"
+        danger
+        onCancel={() => setConfirmKillServer(false)}
+        onConfirm={() => void killServer().catch((err) => setError(String(err)))}
+      />
     </div>
   );
 }