frontend/client/query: refactor and only add timeout for registration token

Author: haraldschilly

src/AGENTS.md

@@ -42,14 +42,24 @@ This file provides guidance to Claude Code (claude.ai/code) and also Gemini CLI
 - `cd packages/[package] && pnpm build` - Build and compile a specific package
   - For packages/next and packages/static, run `cd packages/[package] && pnpm build-dev`
 - `cd packages/[package] && pnpm test` - Run tests for a specific package
-- To typecheck the frontend, it is best to run `cd packages/static && pnpm build` - this implicitly compiles the frontend and reports TypeScript errors
 - **IMPORTANT**: When modifying packages like `util` that other packages depend on, you must run `pnpm build` in the modified package before typechecking dependent packages
 
 ### Development
 
 - **IMPORTANT**: Always run `prettier -w [filename]` immediately after editing any .ts, .tsx, .md, or .json file to ensure consistent styling
-- After TypeScript or `*.tsx` changes, run `pnpm build` in the relevant package directory
-  - When editing the frontend, run `pnpm build-dev` in `packages/static` (this implicitly builds the frontend)
+
+#### When Working on Frontend Code
+
+After making changes to files in `packages/frontend`:
+
+1. **Typecheck**: Run `cd packages/frontend && pnpm tsc --noEmit` to check for TypeScript errors
+2. **Build**: Run `cd packages/static && pnpm build-dev` to compile the frontend for testing
+
+**DO NOT** run `pnpm build` in `packages/frontend` - it won't work as expected for frontend development.
+
+#### When Working on Other Packages
+
+- After TypeScript changes, run `pnpm build` in the relevant package directory
 
 ## Architecture Overview
 
@@ -155,11 +165,11 @@ CoCalc is organized as a monorepo with key packages:
 
 ### Development Workflow
 
-1. Changes to TypeScript require compilation (`pnpm build` in relevant package)
-2. Database must be running before starting hub
-3. Hub coordinates all services and should be restarted after changes
-4. Use `pnpm clean && pnpm build-dev` when switching branches or after major changes
-5. **IMPORTANT**: After any frontend code changes, run `pnpm build-dev` in the `packages/static` directory to compile the frontend
+1. **Frontend changes**: After editing `packages/frontend`, typecheck with `cd packages/frontend && pnpm tsc --noEmit`, then build with `cd packages/static && pnpm build-dev`
+2. **Other package changes**: After TypeScript changes, run `pnpm build` in the relevant package directory
+3. Database must be running before starting hub
+4. Hub coordinates all services and should be restarted after changes
+5. Use `pnpm clean && pnpm build-dev` when switching branches or after major changes
 
 # Workflow
 

src/packages/frontend/admin/registration-token-hook.tsx

@@ -29,15 +29,6 @@ export function formatEphemeralHours(value?: number): string {
   return seconds2hms(seconds, false, false, false);
 }
 
-export function ephemeralSignupUrl(token?: string): string {
-  if (!token) return "";
-  if (typeof window === "undefined") {
-    return `/ephemeral?token=${token}`;
-  }
-  const { protocol, host } = window.location;
-  return `${protocol}//${host}/ephemeral?token=${token}`;
-}
-
 export function getEphemeralMode(ephemeral?: number): string | undefined {
   const presetKey = findPresetKey(ephemeral);
   if (presetKey) return presetKey;
@@ -155,6 +146,7 @@ export function useRegistrationTokens() {
         query: {
           registration_tokens: val,
         },
+        timeout: 15000,
       });
       // we save the original one, with dayjs in it!
       setLastSaved(val_orig);
@@ -204,8 +196,8 @@ export function useRegistrationTokens() {
   async function deleteTokens(): Promise<void> {
     setDeleting(true);
     try {
-      // it's not possible to delete several tokens at once
-      await selRows.map(async (token) => await deleteToken(token));
+      // Delete tokens in parallel and wait for all to complete
+      await Promise.all(selRows.map((token) => deleteToken(token)));
       setSelRows([]);
       load();
     } catch (err) {

src/packages/frontend/admin/registration-token.tsx

@@ -12,6 +12,7 @@ import {
   Descriptions,
   Popconfirm,
   Progress,
+  Space,
   Switch,
   Table,
 } from "antd";
@@ -44,7 +45,6 @@ import { PassportStrategyFrontend } from "@cocalc/util/types/passport-types";
 
 import RegistrationTokenDialog from "./registration-token-dialog";
 import {
-  ephemeralSignupUrl,
   formatEphemeralHours,
   useRegistrationTokens,
 } from "./registration-token-hook";
@@ -83,7 +83,7 @@ export function RegistrationToken() {
   function render_buttons() {
     const any_selected = selRows.length > 0;
     return (
-      <AntdButton.Group style={{ margin: "10px 0" }}>
+      <Space.Compact style={{ margin: "10px 0" }}>
         <AntdButton
           type={!any_selected ? "primary" : "default"}
           disabled={any_selected}
@@ -107,10 +107,19 @@ export function RegistrationToken() {
           <Icon name="refresh" />
           Refresh
         </AntdButton>
-      </AntdButton.Group>
+      </Space.Compact>
     );
   }
 
+  function ephemeralSignupUrl(token: Token): string {
+    if (!token || token.ephemeral == null) return "";
+    if (typeof window === "undefined") {
+      return `/ephemeral?token=${token.token}`;
+    }
+    const { protocol, host } = window.location;
+    return `${protocol}//${host}/ephemeral?token=${token.token}`;
+  }
+
   function render_expanded_row(token: Token): Rendered {
     const uses = token.counter ?? 0;
     const limit = token.limit;
@@ -128,7 +137,7 @@ export function RegistrationToken() {
       token.ephemeral != null
         ? seconds2hms(token.ephemeral / 1000, true)
         : "No";
-    const ephemeralLink = ephemeralSignupUrl(token.token);
+    const ephemeralLink = ephemeralSignupUrl(token);
 
     const items: DescriptionsProps["items"] = [
       {
@@ -263,7 +272,7 @@ export function RegistrationToken() {
             dataIndex="ephemeral"
             render={(value, token) => {
               if (value == null) return "-";
-              const url = ephemeralSignupUrl(token.token);
+              const url = ephemeralSignupUrl(token);
               return (
                 <div
                   style={{

src/packages/frontend/client/query.ts

@@ -19,6 +19,79 @@ export class QueryClient {
     this.client = client;
   }
 
+  private doChangefeed = async (opts: {
+    query: object;
+    options?: object[];
+    cb: CB;
+  }): Promise<void> => {
+    let changefeed;
+    try {
+      changefeed = new ConatChangefeed({
+        account_id: this.client.account_id,
+        query: opts.query,
+        options: opts.options,
+      });
+      // id for canceling this changefeed
+      const id = uuid();
+      const initval = await changefeed.connect();
+      const query = {
+        [Object.keys(opts.query)[0]]: initval,
+      };
+      this.changefeeds[id] = changefeed;
+      opts.cb(undefined, { query, id });
+      changefeed.on("update", (change) => {
+        opts.cb(undefined, change);
+      });
+    } catch (err) {
+      opts.cb(`${err}`);
+    }
+  };
+
+  private doQuery = async (opts: {
+    query: object;
+    options?: object[];
+    timeout?: number;
+  }): Promise<any> => {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+
+    try {
+      const queryPromise = this.client.conat_client.hub.db.userQuery({
+        query: opts.query,
+        options: opts.options,
+        timeout: opts.timeout,
+      });
+
+      // Add client-side timeout if explicitly requested
+      if (opts.timeout != null) {
+        let timedOut = false;
+
+        const timeoutPromise = new Promise<never>((_, reject) => {
+          timer = setTimeout(() => {
+            timedOut = true; // Set flag before rejecting
+            reject(new Error(`Query timed out after ${opts.timeout} ms`));
+          }, opts.timeout);
+        });
+
+        // Prevent unhandled rejection if timeout fires first
+        queryPromise.catch((err) => {
+          if (timedOut) {
+            // Timeout already happened, this is an orphaned rejection - just log it
+            console.warn("Query failed after client-side timeout:", err);
+          }
+          // If not timed out, error is handled by the race
+        });
+
+        return await Promise.race([queryPromise, timeoutPromise]);
+      } else {
+        return await queryPromise;
+      }
+    } finally {
+      if (timer != null) {
+        clearTimeout(timer);
+      }
+    }
+  };
+
   // This works like a normal async function when
   // opts.cb is NOT specified.  When opts.cb is specified,
   // it works like a cb and returns nothing.    For changefeeds
@@ -30,84 +103,50 @@ export class QueryClient {
     timeout?: number; // ms
     cb?: CB; // support old cb interface
   }): Promise<any> => {
-    const timeoutMs = opts.timeout ?? 15000;
-    let timer: ReturnType<typeof setTimeout> | undefined;
-    const timeoutPromise = new Promise<never>((_, reject) => {
-      timer = setTimeout(
-        () => reject(new Error(`Query timed out after ${timeoutMs} ms`)),
-        timeoutMs,
-      );
-    });
-
-    try {
-      // Deprecation warnings:
-      for (const field of ["standby", "no_post", "ignore_response"]) {
-        if (opts[field] != null) {
-          console.trace(`WARNING: passing '${field}' to query is deprecated`);
-        }
+    // Deprecation warnings:
+    for (const field of ["standby", "no_post", "ignore_response"]) {
+      if (opts[field] != null) {
+        console.trace(`WARNING: passing '${field}' to query is deprecated`);
       }
-      if (opts.options != null && !is_array(opts.options)) {
-        // should never happen...
-        throw Error("options must be an array");
+    }
+    if (opts.options != null && !is_array(opts.options)) {
+      // should never happen...
+      throw Error("options must be an array");
+    }
+    if (opts.changes) {
+      const { cb } = opts;
+      if (cb == null) {
+        throw Error("for changefeed, must specify opts.cb");
       }
-      if (opts.changes) {
-        const { cb } = opts;
-        if (cb == null) {
-          throw Error("for changefeed, must specify opts.cb");
-        }
-        let changefeed;
-        try {
-          changefeed = new ConatChangefeed({
-            account_id: this.client.account_id,
-            query: opts.query,
-            options: opts.options,
-          });
-          // id for canceling this changefeed
-          const id = uuid();
-          const initval = await changefeed.connect();
-          const query = {
-            [Object.keys(opts.query)[0]]: initval,
-          };
-          this.changefeeds[id] = changefeed;
-          cb(undefined, { query, id });
-          changefeed.on("update", (change) => {
-            cb(undefined, change);
-          });
-        } catch (err) {
-          cb(`${err}`);
-          return;
+      await this.doChangefeed({
+        query: opts.query,
+        options: opts.options,
+        cb,
+      });
+    } else {
+      try {
+        const err = validate_client_query(opts.query, this.client.account_id);
+        if (err) {
+          throw Error(err);
         }
-      } else {
-        try {
-          const err = validate_client_query(opts.query, this.client.account_id);
-          if (err) {
-            throw Error(err);
-          }
-          const query = await Promise.race([
-            this.client.conat_client.hub.db.userQuery({
-              query: opts.query,
-              options: opts.options,
-              timeout: opts.timeout,
-            }),
-            timeoutPromise,
-          ]);
 
-          if (opts.cb == null) {
-            return { query };
-          } else {
-            opts.cb(undefined, { query });
-          }
-        } catch (err) {
-          if (opts.cb == null) {
-            throw err;
-          } else {
-            opts.cb(err);
-          }
+        const query = await this.doQuery({
+          query: opts.query,
+          options: opts.options,
+          timeout: opts.timeout,
+        });
+
+        if (opts.cb == null) {
+          return { query };
+        } else {
+          opts.cb(undefined, { query });
+        }
+      } catch (err) {
+        if (opts.cb == null) {
+          throw err;
+        } else {
+          opts.cb(err);
         }
-      }
-    } finally {
-      if (timer != null) {
-        clearTimeout(timer);
       }
     }
   };

src/packages/frontend/frame-editors/generic/client.ts

@@ -258,6 +258,7 @@ interface QueryOpts {
   changes?: boolean;
   options?: object[]; // e.g., [{limit:5}],
   no_post?: boolean;
+  timeout?: number; // ms
 }
 
 export async function query(opts: QueryOpts): Promise<any> {