fix(admin/spa): wire AbortSignal through every read API + minor polish

Two converging review findings (Claude bot + Gemini Code Assist):

1. AbortSignal not plumbed through listTables / describeTable /
   listBuckets / describeBucket. useApiQuery created an
   AbortController and passed signal to the loader, but those four
   methods discarded it - so requests ran to completion after a
   component unmounted, wasting network and server connections. Now
   every read method mirrors cluster's signature (`signal?: AbortSignal`)
   and every page-level useApiQuery callsite passes it through.

2. The safe() wrapper in Dashboard.tsx was a no-op that received
   `signal` and never passed it on. The "404 doesn't cancel render"
   suppression it claimed to provide is already handled by SummaryCard
   testing `error?.status === 404 && pendingMessage`. Removed.

Drive-by polish from the same reviews:

- useApiQuery's effect deps no longer include `markUnauthorized`.
  Read it through markUnauthorizedRef so an AuthProvider remount
  (React Fast Refresh in dev, or any future wrapping change) does
  not invalidate every active query and trigger a fresh round-trip
  on every page. Mirrors the existing loaderRef pattern.

- Login.tsx now trims `secretKey` in addition to `accessKey`. SigV4
  secrets never contain whitespace, so trimming is safe and saves
  an operator from a cryptic 401 after pasting a key with a
  trailing newline.

Modal accessibility (no focus trap, missing aria-modal / role=dialog)
was flagged as low-priority polish for an internal operator tool.
Tracked as a follow-up; not addressed here to keep this change
focused on the functional bugs.

Verified with `npm run build` and `npm run lint` (tsc --strict
--noUnusedLocals --noUncheckedSideEffectImports), and `go build ./...`.

Author: bootjp

web/admin/src/api/client.ts

@@ -202,18 +202,18 @@ export const api = {
   logout: () => apiFetch<void>("/auth/logout", { method: "POST" }),
   cluster: (signal?: AbortSignal) =>
     apiFetch<ClusterInfo>("/cluster", { signal }),
-  listTables: (next_token?: string) =>
-    apiFetch<DynamoTableList>("/dynamo/tables", { query: { next_token } }),
-  describeTable: (name: string) =>
-    apiFetch<DynamoTable>(`/dynamo/tables/${encodeURIComponent(name)}`),
+  listTables: (next_token?: string, signal?: AbortSignal) =>
+    apiFetch<DynamoTableList>("/dynamo/tables", { query: { next_token }, signal }),
+  describeTable: (name: string, signal?: AbortSignal) =>
+    apiFetch<DynamoTable>(`/dynamo/tables/${encodeURIComponent(name)}`, { signal }),
   createTable: (req: CreateTableRequest) =>
     apiFetch<DynamoTable>("/dynamo/tables", { method: "POST", body: req as unknown as Json }),
   deleteTable: (name: string) =>
     apiFetch<void>(`/dynamo/tables/${encodeURIComponent(name)}`, { method: "DELETE" }),
-  listBuckets: (next_token?: string) =>
-    apiFetch<S3BucketList>("/s3/buckets", { query: { next_token } }),
-  describeBucket: (name: string) =>
-    apiFetch<S3Bucket>(`/s3/buckets/${encodeURIComponent(name)}`),
+  listBuckets: (next_token?: string, signal?: AbortSignal) =>
+    apiFetch<S3BucketList>("/s3/buckets", { query: { next_token }, signal }),
+  describeBucket: (name: string, signal?: AbortSignal) =>
+    apiFetch<S3Bucket>(`/s3/buckets/${encodeURIComponent(name)}`, { signal }),
   createBucket: (req: CreateBucketRequest) =>
     apiFetch<S3Bucket>("/s3/buckets", { method: "POST", body: req as unknown as Json }),
   putBucketAcl: (name: string, acl: "private" | "public-read") =>

web/admin/src/lib/useApi.ts

@@ -23,6 +23,13 @@ export function useApiQuery<T>(
   const [tick, setTick] = useState(0);
   const loaderRef = useRef(loader);
   loaderRef.current = loader;
+  // markUnauthorizedRef mirrors loaderRef for the same reason: keep the
+  // 401 reaction out of the effect's dep list so a transient identity
+  // change in AuthProvider (e.g. React Fast Refresh in dev, or a future
+  // wrapping change) doesn't invalidate every active query and trigger
+  // a fresh network round-trip on every page.
+  const markUnauthorizedRef = useRef(markUnauthorized);
+  markUnauthorizedRef.current = markUnauthorized;
 
   useEffect(() => {
     const ctrl = new AbortController();
@@ -40,7 +47,7 @@ export function useApiQuery<T>(
         if (cancelled) return;
         if (ctrl.signal.aborted) return;
         if (err instanceof ApiError) {
-          if (err.status === 401) markUnauthorized();
+          if (err.status === 401) markUnauthorizedRef.current();
           setError(err);
         } else {
           setError(new ApiError(0, "network_error", String(err)));
@@ -54,8 +61,10 @@ export function useApiQuery<T>(
     // The loader itself is intentionally NOT in the dep list: callers
     // pass an inline arrow and the explicit deps array models the real
     // input set. Also include `tick` so reload() forces a refetch.
+    // markUnauthorized is read through markUnauthorizedRef so it does
+    // not need to be a dep either.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [...deps, tick, markUnauthorized]);
+  }, [...deps, tick]);
 
   const reload = useCallback(() => setTick((t) => t + 1), []);
   return { data, error, loading, reload };

web/admin/src/pages/Dashboard.tsx

@@ -1,10 +1,11 @@
-import { ApiError, api } from "../api/client";
+import type { ApiError } from "../api/client";
+import { api } from "../api/client";
 import { formatApiError, useApiQuery } from "../lib/useApi";
 
 export function DashboardPage() {
   const cluster = useApiQuery((signal) => api.cluster(signal), []);
-  const tables = useApiQuery((signal) => safe(() => api.listTables(), signal), []);
-  const buckets = useApiQuery((signal) => safe(() => api.listBuckets(), signal), []);
+  const tables = useApiQuery((signal) => api.listTables(undefined, signal), []);
+  const buckets = useApiQuery((signal) => api.listBuckets(undefined, signal), []);
 
   return (
     <div className="space-y-6">
@@ -125,9 +126,3 @@ function SummaryCard({ label, value, loading, error, pendingMessage }: SummaryCa
   );
 }
 
-// safe wraps a promise so a 404 from a not-yet-wired backend route
-// does not cancel the dashboard render. Other errors propagate.
-function safe<T>(fn: () => Promise<T>, signal?: AbortSignal): Promise<T> {
-  if (signal?.aborted) return Promise.reject(new ApiError(0, "aborted", ""));
-  return fn();
-}

web/admin/src/pages/DynamoDetail.tsx

@@ -8,7 +8,7 @@ import { formatApiError, useApiQuery } from "../lib/useApi";
 export function DynamoDetailPage() {
   const { name = "" } = useParams<{ name: string }>();
   const { session } = useAuth();
-  const detail = useApiQuery((_signal) => api.describeTable(name), [name]);
+  const detail = useApiQuery((signal) => api.describeTable(name, signal), [name]);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [deleteError, setDeleteError] = useState<string | null>(null);

web/admin/src/pages/DynamoList.tsx

@@ -7,7 +7,7 @@ import { formatApiError, useApiQuery } from "../lib/useApi";
 
 export function DynamoListPage() {
   const { session } = useAuth();
-  const tables = useApiQuery((_signal) => api.listTables(undefined), []);
+  const tables = useApiQuery((signal) => api.listTables(undefined, signal), []);
   const [open, setOpen] = useState(false);
   const writeAllowed = session?.role === "full";
 

web/admin/src/pages/Login.tsx

@@ -25,7 +25,10 @@ export function LoginPage() {
     e.preventDefault();
     setError(null);
     try {
-      await login(accessKey.trim(), secretKey);
+      // Trim both sides: SigV4 secret keys never contain whitespace, so
+      // trimming is safe and saves an operator who pasted a key with
+      // trailing newline from a cryptic 401.
+      await login(accessKey.trim(), secretKey.trim());
       const from = (location.state as LocationState | null)?.from ?? "/";
       navigate(from, { replace: true });
     } catch (err) {

web/admin/src/pages/S3Detail.tsx

@@ -8,7 +8,7 @@ import { formatApiError, useApiQuery } from "../lib/useApi";
 export function S3DetailPage() {
   const { name = "" } = useParams<{ name: string }>();
   const { session } = useAuth();
-  const detail = useApiQuery((_signal) => api.describeBucket(name), [name]);
+  const detail = useApiQuery((signal) => api.describeBucket(name, signal), [name]);
   const [aclBusy, setAclBusy] = useState(false);
   const [aclError, setAclError] = useState<string | null>(null);
   const [confirmDelete, setConfirmDelete] = useState(false);

web/admin/src/pages/S3List.tsx

@@ -7,7 +7,7 @@ import { formatApiError, useApiQuery } from "../lib/useApi";
 
 export function S3ListPage() {
   const { session } = useAuth();
-  const buckets = useApiQuery((_signal) => api.listBuckets(), []);
+  const buckets = useApiQuery((signal) => api.listBuckets(undefined, signal), []);
   const [open, setOpen] = useState(false);
   const writeAllowed = session?.role === "full";