app/cm_api.py

@@ -122,10 +122,7 @@ class CM_API:
                 )
                 params = [limit, offset]
 
-            rows = db.query(query, params)
+            return jsonify(db.query(query, params))
-            count_rows = db.query("SELECT COUNT(*) AS c FROM acc", [])
-            total = int(count_rows[0]["c"]) if count_rows else 0
-            return jsonify({"rows": rows, "total": total})
 
         except Exception as error:
             return self._handle_error(error, "Not Found"), 404
@@ -169,10 +166,7 @@ class CM_API:
                 )
                 params = [limit, offset]
 
-            rows = db.query(query, params)
+            return jsonify(db.query(query, params))
-            count_rows = db.query("SELECT COUNT(*) AS c FROM user", [])
-            total = int(count_rows[0]["c"]) if count_rows else 0
-            return jsonify({"rows": rows, "total": total})
 
         except Exception as error:
             return self._handle_error(error, "Not Found"), 404

web/app/page.tsx

@@ -9,7 +9,6 @@ export default async function AccountsPage() {
     <AccountsTable
       initial={page.rows}
       initialHasMore={page.hasMore}
-      initialTotal={page.total}
       prefixPattern={PREFIX_PATTERN}
     />
   );

web/app/users/page.tsx

@@ -13,7 +13,6 @@ export default async function UsersPage() {
     <UsersTable
       initial={page.rows}
       initialHasMore={page.hasMore}
-      initialTotal={page.total}
       prefixPattern={PREFIX_PATTERN}
     />
   );

web/components/accounts-table.tsx

@@ -16,7 +16,6 @@ import Toast, { type ToastMessage } from "./toast";
 type Props = {
   initial: Acc[];
   initialHasMore: boolean;
-  initialTotal: number;
   prefixPattern: string;
 };
 type SortDir = "asc" | "desc";
@@ -62,12 +61,12 @@ function DeleteButton({
 export default function AccountsTable({
   initial,
   initialHasMore,
-  initialTotal,
   prefixPattern,
 }: Props) {
   const [sortDir, setSortDir] = useState<SortDir>("desc");
   const [editingKey, setEditingKey] = useState<string | null>(null);
   const [, startTransition] = useTransition();
+  const [refreshing, setRefreshing] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
@@ -75,22 +74,9 @@ export default function AccountsTable({
   const [createOpen, setCreateOpen] = useState(false);
   const [toast, setToast] = useState<ToastMessage | null>(null);
 
-  // iOS Safari (and sometimes Chrome on Android) keeps the document
-  // scroll position across SPA route changes, so tab-switching from
-  // /users back to / leaves the user halfway down the page. Force
-  // scroll-to-top on mount; route transitions remount the table.
-  useEffect(() => {
-    window.scrollTo({ top: 0, left: 0, behavior: "instant" });
-  }, []);
-
   // Accumulated rows from initial server-side fetch + every loadMore.
   const [rows, setRows] = useState<Acc[]>(initial);
   const [hasMore, setHasMore] = useState<boolean>(initialHasMore);
-  // Total row count in the DB; updated on every page fetch so it stays
-  // fresh as external writes (the cm99 monitor) add rows. Mutations
-  // adjust it locally so the header doesn't flash a stale count between
-  // the optimistic update and the next page-fresh count.
-  const [total, setTotal] = useState<number>(initialTotal);
   const sentinelRef = useRef<HTMLDivElement | null>(null);
 
   const [optimistic, applyOptimistic] = useOptimistic<Acc[], OptimisticPatch>(
@@ -119,15 +105,15 @@ export default function AccountsTable({
     });
   }
 
-  // Force-evict the cache and re-fetch page 1. Used by the create-success
-  // path so a freshly added row appears in its sorted position. Keeping
-  // the function (instead of inlining at the call site) means a future
-  // 'pull to refresh' gesture has a single hook.
   async function refresh() {
-    const page = await refreshAccounts({ prefix: prefixPattern, dir: sortDir });
+    setRefreshing(true);
-    setRows(page.rows);
+    try {
-    setHasMore(page.hasMore);
+      const page = await refreshAccounts({ prefix: prefixPattern, dir: sortDir });
-    setTotal(page.total);
+      setRows(page.rows);
+      setHasMore(page.hasMore);
+    } finally {
+      setRefreshing(false);
+    }
   }
 
   async function changeSort(next: SortDir) {
@@ -142,7 +128,6 @@ export default function AccountsTable({
       });
       setRows(page.rows);
       setHasMore(page.hasMore);
-      setTotal(page.total);
     } finally {
       setLoadingMore(false);
     }
@@ -152,7 +137,7 @@ export default function AccountsTable({
   // 300px rootMargin so the next page starts loading before the user
   // hits the bottom — feels seamless when scrolling fast.
   useEffect(() => {
-    if (!hasMore || loadingMore) return;
+    if (!hasMore || loadingMore || refreshing) return;
     const sentinel = sentinelRef.current;
     if (!sentinel) return;
 
@@ -168,7 +153,6 @@ export default function AccountsTable({
           .then((page) => {
             setRows((prev) => [...prev, ...page.rows]);
             setHasMore(page.hasMore);
-            setTotal(page.total);
           })
           .catch((err) => console.error("loadMoreAccounts failed:", err))
           .finally(() => setLoadingMore(false));
@@ -177,7 +161,7 @@ export default function AccountsTable({
     );
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [hasMore, loadingMore, rows.length, prefixPattern, sortDir]);
+  }, [hasMore, loadingMore, refreshing, rows.length, prefixPattern, sortDir]);
 
   async function confirmDelete() {
     if (!deleteTarget) return;
@@ -188,7 +172,6 @@ export default function AccountsTable({
     if (result.ok) {
       const deleted = deleteTarget;
       setRows((prev) => prev.filter((r) => r.username !== deleted));
-      setTotal((t) => Math.max(0, t - 1));
       setDeleteTarget(null);
       setToast({ type: "success", message: `Account ${deleted} deleted` });
     } else {
@@ -200,8 +183,11 @@ export default function AccountsTable({
     return (
       <div>
         <PageHead
-          total={total}
+          count={0}
           loaded={0}
+          hasMore={false}
+          onRefresh={refresh}
+          refreshing={refreshing}
           onAdd={() => setCreateOpen(true)}
         />
         <div className="mt-6 rounded-2xl bg-white px-8 py-16 text-center ring-1 ring-zinc-200/60">
@@ -227,8 +213,11 @@ export default function AccountsTable({
   return (
     <div>
       <PageHead
-        total={total}
+        count={optimistic.length}
         loaded={optimistic.length}
+        hasMore={hasMore}
+        onRefresh={refresh}
+        refreshing={refreshing}
         onAdd={() => setCreateOpen(true)}
       />
 
@@ -446,45 +435,58 @@ function CardRow({ label, children }: { label: string; children: React.ReactNode
 }
 
 function PageHead({
-  total,
+  count,
   loaded,
+  hasMore,
+  onRefresh,
+  refreshing,
   onAdd,
 }: {
-  total: number;
+  count: number;
   loaded: number;
+  hasMore: boolean;
+  onRefresh: () => void;
+  refreshing: boolean;
   onAdd: () => void;
 }) {
-  // total = COUNT(*) from the API; loaded = how many rows the user has
+  // count == loaded for now; kept separate so a future "showing X of Y"
-  // scrolled in so far. Show the partial count only while it differs
+  // header (when we surface a server-side total) drops in cleanly.
-  // from the total, so a fully-scrolled list reads cleanly.
+  const showHasMore = hasMore && loaded > 0;
-  const showLoaded = loaded > 0 && loaded < total;
   return (
-    <div>
+    <div className="flex flex-wrap items-end justify-between gap-4">
-      <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
+      <div>
-        Table
+        <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">
-      </p>
+          Table
-      <div className="mt-1 flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
+        </p>
-        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
+        <h1 className="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
           Accounts
           <span className="ml-2 align-middle text-base font-medium text-zinc-400">
-            {total}
+            {count}
+            {showHasMore && <span className="text-zinc-300">+</span>}
           </span>
         </h1>
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={refreshing}
+          className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-medium text-zinc-700 shadow-sm ring-1 ring-zinc-200 transition-colors hover:bg-zinc-50 hover:text-zinc-900 disabled:opacity-60"
+        >
+          <span aria-hidden="true" className={refreshing ? "inline-block animate-spin" : ""}>
+            ⟳
+          </span>
+          Refresh
+        </button>
         <button
           type="button"
           onClick={onAdd}
-          aria-label="Add account"
+          className="inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-4 py-2 text-xs font-medium text-white shadow-sm transition-colors hover:bg-zinc-700"
-          className="inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-colors hover:bg-zinc-700"
         >
           <span aria-hidden="true">+</span>
           Add
         </button>
       </div>
-      {showLoaded && (
-        <p className="mt-1 text-[11px] text-zinc-400">
-          Showing {loaded} of {total}
-        </p>
-      )}
     </div>
   );
 }

web/components/users-table.tsx

@@ -16,7 +16,6 @@ import Toast, { type ToastMessage } from "./toast";
 type Props = {
   initial: User[];
   initialHasMore: boolean;
-  initialTotal: number;
   prefixPattern: string;
 };
 type SortDir = "asc" | "desc";
@@ -63,13 +62,13 @@ function DeleteButton({
 export default function UsersTable({
   initial,
   initialHasMore,
-  initialTotal,
   prefixPattern,
 }: Props) {
   const [sortKey, setSortKey] = useState<SortKey>("last_update_time");
   const [sortDir, setSortDir] = useState<SortDir>("desc");
   const [editingKey, setEditingKey] = useState<string | null>(null);
   const [, startTransition] = useTransition();
+  const [refreshing, setRefreshing] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<string | null>(null);
   const [deleting, setDeleting] = useState(false);
@@ -77,16 +76,8 @@ export default function UsersTable({
   const [createOpen, setCreateOpen] = useState(false);
   const [toast, setToast] = useState<ToastMessage | null>(null);
 
-  // Force scroll-to-top on mount — iOS Safari preserves document scroll
-  // across SPA route changes, so tab-switching leaves the new page
-  // halfway down. Route transitions remount the table, so [] deps fire.
-  useEffect(() => {
-    window.scrollTo({ top: 0, left: 0, behavior: "instant" });
-  }, []);
-
   const [rows, setRows] = useState<User[]>(initial);
   const [hasMore, setHasMore] = useState<boolean>(initialHasMore);
-  const [total, setTotal] = useState<number>(initialTotal);
   const sentinelRef = useRef<HTMLDivElement | null>(null);
 
   const [optimistic, applyOptimistic] = useOptimistic<User[], OptimisticPatch>(
@@ -129,17 +120,19 @@ export default function UsersTable({
     });
   }
 
-  // Force-evict the cache and re-fetch page 1. Used by the create-success
-  // path so a freshly added row appears in its sorted position.
   async function refresh() {
-    const page = await refreshUsers({
+    setRefreshing(true);
-      prefix: prefixPattern,
+    try {
-      sort: sortKey,
+      const page = await refreshUsers({
-      dir: sortDir,
+        prefix: prefixPattern,
-    });
+        sort: sortKey,
-    setRows(page.rows);
+        dir: sortDir,
-    setHasMore(page.hasMore);
+      });
-    setTotal(page.total);
+      setRows(page.rows);
+      setHasMore(page.hasMore);
+    } finally {
+      setRefreshing(false);
+    }
   }
 
   async function changeSort(nextKey: SortKey) {
@@ -161,14 +154,13 @@ export default function UsersTable({
       });
       setRows(page.rows);
       setHasMore(page.hasMore);
-      setTotal(page.total);
     } finally {
       setLoadingMore(false);
     }
   }
 
   useEffect(() => {
-    if (!hasMore || loadingMore) return;
+    if (!hasMore || loadingMore || refreshing) return;
     const sentinel = sentinelRef.current;
     if (!sentinel) return;
     const observer = new IntersectionObserver(
@@ -184,7 +176,6 @@ export default function UsersTable({
           .then((page) => {
             setRows((prev) => [...prev, ...page.rows]);
             setHasMore(page.hasMore);
-            setTotal(page.total);
           })
           .catch((err) => console.error("loadMoreUsers failed:", err))
           .finally(() => setLoadingMore(false));
@@ -193,7 +184,7 @@ export default function UsersTable({
     );
     observer.observe(sentinel);
     return () => observer.disconnect();
-  }, [hasMore, loadingMore, rows.length, prefixPattern, sortKey, sortDir]);
+  }, [hasMore, loadingMore, refreshing, rows.length, prefixPattern, sortKey, sortDir]);
 
   async function confirmDelete() {
     if (!deleteTarget) return;
@@ -204,7 +195,6 @@ export default function UsersTable({
     if (result.ok) {
       const deleted = deleteTarget;
       setRows((prev) => prev.filter((r) => r.f_username !== deleted));
-      setTotal((t) => Math.max(0, t - 1));
       setDeleteTarget(null);
       setToast({ type: "success", message: `User ${deleted} deleted` });
     } else {
@@ -232,8 +222,10 @@ export default function UsersTable({
     return (
       <div>
         <PageHead
-          total={total}
+          count={0}
-          loaded={0}
+          hasMore={false}
+          onRefresh={refresh}
+          refreshing={refreshing}
           onAdd={() => setCreateOpen(true)}
         />
         <div className="mt-6 rounded-2xl bg-white px-8 py-16 text-center ring-1 ring-zinc-200/60">
@@ -257,8 +249,10 @@ export default function UsersTable({
   return (
     <div>
       <PageHead
-        total={total}
+        count={optimistic.length}
-        loaded={optimistic.length}
+        hasMore={hasMore}
+        onRefresh={refresh}
+        refreshing={refreshing}
         onAdd={() => setCreateOpen(true)}
       />
 
@@ -465,40 +459,52 @@ function MobileRow({ label, children }: { label: string; children: React.ReactNo
 }
 
 function PageHead({
-  total,
+  count,
-  loaded,
+  hasMore,
+  onRefresh,
+  refreshing,
   onAdd,
 }: {
-  total: number;
+  count: number;
-  loaded: number;
+  hasMore: boolean;
+  onRefresh: () => void;
+  refreshing: boolean;
   onAdd: () => void;
 }) {
-  const showLoaded = loaded > 0 && loaded < total;
+  const showHasMore = hasMore && count > 0;
   return (
-    <div>
+    <div className="flex flex-wrap items-end justify-between gap-4">
-      <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Table</p>
+      <div>
-      <div className="mt-1 flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
+        <p className="text-[11px] font-medium uppercase tracking-wider text-zinc-500">Table</p>
-        <h1 className="text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
+        <h1 className="mt-1 text-2xl font-semibold tracking-tight text-zinc-900 sm:text-3xl">
           Users
           <span className="ml-2 align-middle text-base font-medium text-zinc-400">
-            {total}
+            {count}
+            {showHasMore && <span className="text-zinc-300">+</span>}
           </span>
         </h1>
+      </div>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onRefresh}
+          disabled={refreshing}
+          className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-xs font-medium text-zinc-700 shadow-sm ring-1 ring-zinc-200 transition-colors hover:bg-zinc-50 hover:text-zinc-900 disabled:opacity-60"
+        >
+          <span aria-hidden="true" className={refreshing ? "inline-block animate-spin" : ""}>
+            ⟳
+          </span>
+          Refresh
+        </button>
         <button
           type="button"
           onClick={onAdd}
-          aria-label="Add user"
+          className="inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-4 py-2 text-xs font-medium text-white shadow-sm transition-colors hover:bg-zinc-700"
-          className="inline-flex items-center gap-1.5 rounded-full bg-zinc-900 px-3 py-1.5 text-xs font-medium text-white shadow-sm transition-colors hover:bg-zinc-700"
         >
           <span aria-hidden="true">+</span>
           Add
         </button>
       </div>
-      {showLoaded && (
-        <p className="mt-1 text-[11px] text-zinc-400">
-          Showing {loaded} of {total}
-        </p>
-      )}
     </div>
   );
 }

web/lib/api.ts

@@ -15,7 +15,7 @@ export const USERS_TAG = "users";
 // in well under one frame even on phones.
 export const PAGE_SIZE = 200;
 
-export type Page<T> = { rows: T[]; hasMore: boolean; total: number };
+export type Page<T> = { rows: T[]; hasMore: boolean };
 
 export type AccountsPageOpts = {
   offset?: number;
@@ -82,21 +82,13 @@ function buildUsersUrl(opts: UsersPageOpts): string {
 export async function getAccountsPage(opts: AccountsPageOpts = {}): Promise<Page<Acc>> {
   const data = (await fetchApi(buildAccountsUrl(opts), {
     next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [ACCOUNTS_TAG] },
-  })) as { rows: Acc[]; total: number };
+  })) as Acc[];
-  return {
+  return { rows: data, hasMore: data.length === PAGE_SIZE };
-    rows: data.rows,
-    hasMore: data.rows.length === PAGE_SIZE,
-    total: data.total,
-  };
 }
 
 export async function getUsersPage(opts: UsersPageOpts = {}): Promise<Page<User>> {
   const data = (await fetchApi(buildUsersUrl(opts), {
     next: { revalidate: CACHE_REVALIDATE_SECONDS, tags: [USERS_TAG] },
-  })) as { rows: User[]; total: number };
+  })) as User[];
-  return {
+  return { rows: data, hasMore: data.length === PAGE_SIZE };
-    rows: data.rows,
-    hasMore: data.rows.length === PAGE_SIZE,
-    total: data.total,
-  };
 }