Merge branch 'feat/admin-console': Administration page (Users + Server tabs)

2026-10-15 16:44:09 +07:00
parent b058179177 b6b40b0c1b
commit 5bc3f7d34a
20 changed files with 1333 additions and 22 deletions
@@ -89,7 +89,9 @@ const SnapshotView = lazy(() =>
  import("./pages/SnapshotView").then((m) => ({ default: m.SnapshotView }))
 );
 const FilesPage = lazy(() => import("./pages/FilesPage").then((m) => ({ default: m.FilesPage })));
-const Users = lazy(() => import("./pages/Users").then((m) => ({ default: m.Users })));
+const Administration = lazy(() =>
+  import("./pages/Administration").then((m) => ({ default: m.Administration }))
+);
 const Artifacts = lazy(() => import("./pages/Artifacts").then((m) => ({ default: m.Artifacts })));

 function PageFallback() {
@@ -237,13 +239,15 @@ export default function App() {
              }
            />
            <Route
-              path="users"
+              path="admin"
              element={
                <Page>
-                  <Users />
+                  <Administration />
                </Page>
              }
            />
+            {/* The Users page became Administration's first tab. */}
+            <Route path="users" element={<Navigate to="/admin" replace />} />
            <Route
              path="settings/*"
              element={
@@ -73,7 +73,7 @@ import {
  ChevronDown,
  FolderTree,
  LogOut,
-  UsersRound,
+  ShieldCheck,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { api } from "../lib/api";
@@ -479,11 +479,11 @@ export function Sidebar({
          {[
            // The file manager serves a shared server; locally it is the desktop's.
            ...NAV_KEYS.filter((n) => !(perms.local && n.to === "/files")),
-            // Server mode: the Users page, for an admin or analyst.
+            // Server mode: Administration (users, server), for an admin or analyst.
            ...(auth.state.mode === "server" &&
            auth.state.user &&
            auth.state.user.role !== "developer"
-              ? [{ to: "/users", icon: UsersRound, key: "nav:users" }]
+              ? [{ to: "/admin", icon: ShieldCheck, key: "nav:admin" }]
              : []),
          ].map(({ to, icon: Icon, key }) => {
            const label = t(key);
@@ -0,0 +1,417 @@
+/**
+ * @file ServerPanel.tsx
+ * @description The Administration page's Server tab: the machine AgentHub
+ * runs on — hostname, OS, uptime, CPU and its load, memory and swap, every
+ * real disk (HDD/SSD, how full), any NVIDIA GPU — and each user's live share
+ * of it (`GET /api/host`, server/lib/host-stats.js): CPU % of the whole
+ * machine, resident memory, process count, the busiest processes by name, and
+ * the disk their home takes (`GET /api/users/storage`, as a share of the disk
+ * that holds the homes). Re-read every `POLL_MS` while shown; Refresh re-reads
+ * at once. Read-only — the only action here is the members' tmux card
+ * (`MemberTmuxCard`, an admin's restart).
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { Fragment, useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  AlertCircle,
+  ChevronDown,
+  ChevronRight,
+  Cpu,
+  HardDrive,
+  MemoryStick,
+  MonitorCog,
+  RefreshCw,
+  Server,
+} from "lucide-react";
+import {
+  api,
+  type HostStats,
+  type HostUsageGroup,
+  type ServerUserUsage,
+  type UserStorage,
+} from "../../lib/api";
+import { formatBytes } from "../../lib/format";
+import { useSpin } from "../../hooks/useSpin";
+import { StatCard } from "../StatCard";
+import { UserAvatar } from "../users/UserAvatar";
+import { MemberTmuxCard } from "../users/MemberTmuxCard";
+
+const POLL_MS = 5000;
+
+const pct = (part: number, whole: number) => (whole > 0 ? (part / whole) * 100 : 0);
+const fmtPct = (n: number) => `${n < 10 ? n.toFixed(1) : Math.round(n)}%`;
+
+/** A thin bar, amber past 75 %, red past 90 %. */
+function Meter({ value, label }: { value: number; label: string }) {
+  const v = Math.max(0, Math.min(100, value));
+  const tone = v >= 90 ? "bg-status-danger" : v >= 75 ? "bg-status-warning" : "bg-accent-solid";
+  return (
+    <div
+      role="meter"
+      aria-label={label}
+      aria-valuenow={Math.round(v)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      className="h-1.5 w-full rounded-full bg-surface-4 overflow-hidden"
+    >
+      <div className={`h-full rounded-full ${tone}`} style={{ width: `${v}%` }} />
+    </div>
+  );
+}
+
+function uptimeText(t: (k: string, o?: Record<string, unknown>) => string, sec: number) {
+  const d = Math.floor(sec / 86400);
+  const h = Math.floor((sec % 86400) / 3600);
+  const m = Math.floor((sec % 3600) / 60);
+  return d > 0 ? t("server.uptimeDays", { d, h }) : t("server.uptimeHours", { h, m });
+}
+
+export function ServerPanel({ isAdmin }: { isAdmin: boolean }) {
+  const { t } = useTranslation("admin");
+  const [stats, setStats] = useState<HostStats | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [users, setUsers] = useState<ServerUserUsage[] | null>(null);
+  const [storage, setStorage] = useState<Record<string, UserStorage> | null>(null);
+  const [open, setOpen] = useState<Set<string>>(new Set());
+
+  const load = useCallback(
+    () =>
+      api.host
+        .stats()
+        .then((s) => {
+          setStats(s);
+          setError(null);
+        })
+        .catch((e: Error) => setError(e.message)),
+    []
+  );
+  const [spinning, refresh] = useSpin(load);
+
+  useEffect(() => {
+    void load();
+    const id = setInterval(() => {
+      if (document.visibilityState === "visible") void load();
+    }, POLL_MS);
+    return () => clearInterval(id);
+  }, [load]);
+
+  // Names, pictures and home sizes: read once, they change slowly.
+  useEffect(() => {
+    api.users
+      .list()
+      .then((r) => setUsers(r.users))
+      .catch(() => setUsers([]));
+    api.users
+      .storage()
+      .then((r) => setStorage(r.storage))
+      .catch(() => setStorage({}));
+  }, []);
+
+  const byId = new Map((users ?? []).map((u) => [u.id, u]));
+  const homesDisk = stats?.disks.find((d) => d.mount === stats.homesMount) ?? null;
+  const loading = !stats && !error;
+  const mem = stats?.memory;
+  const toggle = (key: string) =>
+    setOpen((s) => {
+      const n = new Set(s);
+      if (n.has(key)) n.delete(key);
+      else n.add(key);
+      return n;
+    });
+
+  const groupName = (g: HostUsageGroup) => {
+    if (g.kind === "host") return t("server.hostGroup");
+    if (g.kind === "system") return t("server.systemGroup");
+    const u = g.userId != null ? byId.get(g.userId) : undefined;
+    return u?.displayName || g.username || "";
+  };
+  const th = "px-5 py-3 text-[11px] font-semibold text-fg-muted uppercase tracking-wider";
+
+  return (
+    <div className="space-y-6" data-testid="server-panel">
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div className="min-w-0">
+          <h2 className="flex items-center gap-2 text-sm font-semibold text-fg-primary">
+            <Server className="w-4 h-4 text-accent" />
+            <span className="truncate">{stats?.hostname ?? t("server.title")}</span>
+          </h2>
+          {stats && (
+            <p className="mt-0.5 text-xs text-fg-muted">
+              {[stats.os.distro ?? stats.os.platform, stats.os.release, stats.os.arch].join(" · ")}
+              {" · "}
+              {t("server.uptime", { v: uptimeText(t, stats.uptime) })}
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          onClick={refresh}
+          disabled={spinning}
+          aria-busy={spinning}
+          className="btn-ghost"
+        >
+          <RefreshCw className={`w-4 h-4 ${spinning ? "animate-spin" : ""}`} />{" "}
+          {t("common:refresh")}
+        </button>
+      </div>
+
+      {error && (
+        <div
+          role="alert"
+          className="card flex flex-wrap items-center gap-3 p-3 border-status-danger/40 text-sm text-status-danger"
+        >
+          <AlertCircle className="w-4 h-4 flex-shrink-0" />
+          <span className="flex-1 min-w-0">{error}</span>
+          <button type="button" onClick={refresh} className="btn-ghost text-xs">
+            {t("common:retry")}
+          </button>
+        </div>
+      )}
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          label={t("server.cpu")}
+          value={stats?.usage ? fmtPct(stats.usage.cpu) : "—"}
+          icon={Cpu}
+          trend={
+            stats
+              ? t("server.cores", {
+                  n: stats.cpu.cores,
+                  load: stats.cpu.load.map((l) => l.toFixed(2)).join(" "),
+                })
+              : undefined
+          }
+          raw={stats?.cpu.model ?? undefined}
+          help={t("server.cpuHelp")}
+          loading={loading}
+        />
+        <StatCard
+          label={t("server.memory")}
+          value={mem ? fmtPct(pct(mem.used, mem.total)) : "—"}
+          icon={MemoryStick}
+          trend={mem ? `${formatBytes(mem.used)} / ${formatBytes(mem.total)}` : undefined}
+          loading={loading}
+        />
+        <StatCard
+          label={t("server.swap")}
+          value={mem && mem.swapTotal ? fmtPct(pct(mem.swapUsed, mem.swapTotal)) : "—"}
+          icon={MonitorCog}
+          trend={mem ? `${formatBytes(mem.swapUsed)} / ${formatBytes(mem.swapTotal)}` : undefined}
+          loading={loading}
+        />
+        <StatCard
+          label={t("server.homesDisk")}
+          value={homesDisk ? fmtPct(pct(homesDisk.used, homesDisk.total)) : "—"}
+          icon={HardDrive}
+          trend={
+            homesDisk
+              ? `${formatBytes(homesDisk.free)} ${t("server.free")} · ${homesDisk.mount}`
+              : undefined
+          }
+          help={t("server.homesDiskHelp")}
+          loading={loading}
+        />
+      </div>
+
+      <div className="card overflow-x-auto">
+        <div className="px-5 pt-4 pb-2">
+          <h3 className="text-sm font-semibold text-fg-primary">{t("server.usageTitle")}</h3>
+          <p className="text-xs text-fg-muted">
+            {t("server.usageHelp", { s: (stats?.usage?.sampleMs ?? 1000) / 1000 })}
+          </p>
+        </div>
+        {stats && !stats.usage ? (
+          <p className="px-5 pb-4 text-sm text-fg-muted">{t("server.usageUnavailable")}</p>
+        ) : (
+          <table className="w-full min-w-[760px]" data-testid="server-usage-table">
+            <thead>
+              <tr className="border-b border-border text-left">
+                <th className={th}>{t("server.who")}</th>
+                <th className={`${th} w-[18%]`}>{t("server.cpu")}</th>
+                <th className={`${th} w-[22%]`}>{t("server.memory")}</th>
+                <th className={`${th} text-right`}>{t("server.processes")}</th>
+                <th className={`${th} w-[18%]`}>{t("server.home")}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {loading && (
+                <tr>
+                  <td colSpan={5} className="px-5 py-6 text-sm text-fg-muted">
+                    {t("server.sampling")}
+                  </td>
+                </tr>
+              )}
+              {stats?.usage?.groups.map((g) => {
+                const u = g.userId != null ? byId.get(g.userId) : undefined;
+                const home = g.userId != null && storage ? storage[g.userId] : undefined;
+                const isOpen = open.has(g.key);
+                const name = groupName(g);
+                return (
+                  <Fragment key={g.key}>
+                    <tr className="hover:bg-surface-4/40 transition-colors">
+                      <td className="px-5 py-3">
+                        <button
+                          type="button"
+                          onClick={() => toggle(g.key)}
+                          disabled={!g.top.length}
+                          aria-expanded={isOpen}
+                          className="flex items-center gap-2 text-left disabled:cursor-default"
+                        >
+                          {g.top.length ? (
+                            isOpen ? (
+                              <ChevronDown className="w-3.5 h-3.5 text-fg-muted" />
+                            ) : (
+                              <ChevronRight className="w-3.5 h-3.5 text-fg-muted" />
+                            )
+                          ) : (
+                            <span className="w-3.5" />
+                          )}
+                          {g.kind === "user" ? (
+                            <UserAvatar
+                              name={name}
+                              avatarAt={u?.avatarAt}
+                              userId={g.userId}
+                              className="h-6 w-6 text-[10px]"
+                            />
+                          ) : (
+                            <span className="flex h-6 w-6 items-center justify-center rounded-full bg-surface-4">
+                              <Server className="w-3.5 h-3.5 text-fg-muted" />
+                            </span>
+                          )}
+                          <span className="min-w-0">
+                            <span className="block text-sm text-fg-primary truncate">{name}</span>
+                            {g.kind === "user" && u?.displayName && (
+                              <span className="block text-[11px] text-fg-muted">{g.username}</span>
+                            )}
+                          </span>
+                        </button>
+                      </td>
+                      <td className="px-5 py-3">
+                        <div className="text-sm text-fg-primary tabular-nums">{fmtPct(g.cpu)}</div>
+                        <Meter value={g.cpu} label={`${name} ${t("server.cpu")}`} />
+                      </td>
+                      <td className="px-5 py-3">
+                        <div className="text-sm text-fg-primary tabular-nums">
+                          {formatBytes(g.memory)}{" "}
+                          <span className="text-fg-muted">({fmtPct(g.memoryPercent)})</span>
+                        </div>
+                        <Meter value={g.memoryPercent} label={`${name} ${t("server.memory")}`} />
+                      </td>
+                      <td className="px-5 py-3 text-right text-sm text-fg-secondary tabular-nums">
+                        {g.processes}
+                      </td>
+                      <td className="px-5 py-3">
+                        {home ? (
+                          <>
+                            <div className="text-sm text-fg-primary tabular-nums">
+                              {formatBytes(home.bytes)}
+                              {homesDisk && (
+                                <span className="text-fg-muted">
+                                  {" "}
+                                  ({fmtPct(pct(home.bytes, homesDisk.total))})
+                                </span>
+                              )}
+                            </div>
+                            {homesDisk && (
+                              <Meter
+                                value={pct(home.bytes, homesDisk.total)}
+                                label={`${name} ${t("server.home")}`}
+                              />
+                            )}
+                          </>
+                        ) : (
+                          <span className="text-sm text-fg-muted">—</span>
+                        )}
+                      </td>
+                    </tr>
+                    {isOpen &&
+                      g.top.map((p) => (
+                        <tr key={`${g.key}:${p.pid}`} className="bg-surface-2/40">
+                          <td className="pl-14 pr-5 py-1.5 text-xs text-fg-secondary font-mono truncate">
+                            {p.name} <span className="text-fg-muted">#{p.pid}</span>
+                          </td>
+                          <td className="px-5 py-1.5 text-xs text-fg-secondary tabular-nums">
+                            {fmtPct(p.cpu)}
+                          </td>
+                          <td className="px-5 py-1.5 text-xs text-fg-secondary tabular-nums">
+                            {formatBytes(p.memory)}
+                          </td>
+                          <td colSpan={2} />
+                        </tr>
+                      ))}
+                  </Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {stats && stats.disks.length > 0 && (
+        <div className="card overflow-x-auto">
+          <h3 className="px-5 pt-4 pb-2 text-sm font-semibold text-fg-primary">
+            {t("server.disks")}
+          </h3>
+          <table className="w-full min-w-[640px]" data-testid="server-disks-table">
+            <thead>
+              <tr className="border-b border-border text-left">
+                <th className={th}>{t("server.mount")}</th>
+                <th className={th}>{t("server.device")}</th>
+                <th className={`${th} w-[30%]`}>{t("server.used")}</th>
+                <th className={`${th} text-right`}>{t("server.free")}</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border">
+              {stats.disks.map((d) => (
+                <tr key={d.device}>
+                  <td className="px-5 py-3 text-sm text-fg-primary">
+                    <span className="font-mono">{d.mount}</span>
+                    {d.mount === stats.homesMount && (
+                      <span className="badge ml-2 py-0 text-[10px]">{t("server.homesBadge")}</span>
+                    )}
+                  </td>
+                  <td className="px-5 py-3 text-xs text-fg-secondary">
+                    <span className="font-mono">{d.device}</span> · {d.type}
+                    {d.kind && <span className="badge ml-2 py-0 text-[10px]">{d.kind}</span>}
+                  </td>
+                  <td className="px-5 py-3">
+                    <div className="text-sm text-fg-primary tabular-nums">
+                      {formatBytes(d.used)} / {formatBytes(d.total)}{" "}
+                      <span className="text-fg-muted">({fmtPct(pct(d.used, d.total))})</span>
+                    </div>
+                    <Meter value={pct(d.used, d.total)} label={d.mount} />
+                  </td>
+                  <td className="px-5 py-3 text-right text-sm text-fg-secondary tabular-nums">
+                    {formatBytes(d.free)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {stats && stats.gpus.length > 0 && (
+        <div className="card p-5 space-y-3">
+          <h3 className="text-sm font-semibold text-fg-primary">{t("server.gpus")}</h3>
+          {stats.gpus.map((g, i) => (
+            <div key={i} className="space-y-1">
+              <div className="flex justify-between text-sm">
+                <span className="text-fg-primary">{g.name}</span>
+                <span className="text-fg-muted tabular-nums">
+                  {fmtPct(g.utilization)} · {formatBytes(g.memoryUsed)} /{" "}
+                  {formatBytes(g.memoryTotal)}
+                </span>
+              </div>
+              <Meter value={g.utilization} label={g.name} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      <MemberTmuxCard isAdmin={isAdmin} />
+    </div>
+  );
+}
@@ -1,6 +1,6 @@
 /**
 * @file MemberTmuxCard.tsx
- * @description The Users page's tmux card (one Linux user per account only,
+ * @description The Administration page's Server-tab tmux card (one Linux user per account only,
 * `GET /api/users/tmux`): each member's own tmux server — the version it runs
 * beside the installed one, its sessions, whether an agent of theirs is
 * working — so an admin sees who still runs an old tmux after an upgrade.
@@ -115,6 +115,7 @@ export const i18nReady = i18n
      "splash",
      "lanes",
      "users",
+      "admin",
      "onboarding",
      "artifacts",
    ],
@@ -0,0 +1,37 @@
+{
+  "title": "Administration",
+  "description": "Accounts and the server AgentHub runs on.",
+  "tabs": {
+    "users": "Users",
+    "server": "Server"
+  },
+  "server": {
+    "title": "Server",
+    "uptime": "up {{v}}",
+    "uptimeDays": "{{d}} d {{h}} h",
+    "uptimeHours": "{{h}} h {{m}} min",
+    "cpu": "CPU",
+    "cores": "{{n}} cores · load {{load}}",
+    "cpuHelp": "Share of the whole machine: 100% means every core is busy.",
+    "memory": "Memory",
+    "swap": "Swap",
+    "homesDisk": "Homes disk",
+    "homesDiskHelp": "The disk that holds the users' home folders.",
+    "free": "free",
+    "usageTitle": "Usage by user",
+    "usageHelp": "Live, sampled over {{s}} s. A process counts for a user when it runs as their Linux account or inside one of their workspaces' sessions. Memory is resident (RSS); shared pages count once per process. Click a row for its busiest processes.",
+    "usageUnavailable": "Per-user usage is read from /proc and is only available on Linux.",
+    "who": "User",
+    "processes": "Processes",
+    "home": "Home",
+    "sampling": "Sampling…",
+    "hostGroup": "Host account (AgentHub and other host processes)",
+    "systemGroup": "System (root and other accounts)",
+    "disks": "Disks",
+    "mount": "Mount",
+    "device": "Device",
+    "used": "Used",
+    "homesBadge": "homes",
+    "gpus": "GPUs"
+  }
+}
@@ -87,5 +87,6 @@
  "sidebar": "Sidebar",
  "now": "now",
  "users": "Users",
+  "admin": "Administration",
  "files": "Files"
 }
@@ -0,0 +1,37 @@
+{
+  "title": "Quản trị",
+  "description": "Tài khoản và máy chủ AgentHub đang chạy.",
+  "tabs": {
+    "users": "Người dùng",
+    "server": "Máy chủ"
+  },
+  "server": {
+    "title": "Máy chủ",
+    "uptime": "đã chạy {{v}}",
+    "uptimeDays": "{{d}} ngày {{h}} giờ",
+    "uptimeHours": "{{h}} giờ {{m}} phút",
+    "cpu": "CPU",
+    "cores": "{{n}} lõi · tải {{load}}",
+    "cpuHelp": "Tỷ lệ trên toàn máy: 100% nghĩa là mọi lõi đều bận.",
+    "memory": "Bộ nhớ",
+    "swap": "Swap",
+    "homesDisk": "Ổ chứa thư mục người dùng",
+    "homesDiskHelp": "Ổ đĩa chứa thư mục home của các người dùng.",
+    "free": "trống",
+    "usageTitle": "Mức sử dụng theo người dùng",
+    "usageHelp": "Số liệu trực tiếp, lấy mẫu trong {{s}} giây. Một tiến trình được tính cho người dùng khi nó chạy bằng tài khoản Linux của họ hoặc trong một phiên thuộc workspace của họ. Bộ nhớ là RSS; trang nhớ dùng chung được tính cho mỗi tiến trình. Bấm vào một dòng để xem các tiến trình nặng nhất.",
+    "usageUnavailable": "Mức dùng theo người dùng được đọc từ /proc nên chỉ có trên Linux.",
+    "who": "Người dùng",
+    "processes": "Tiến trình",
+    "home": "Thư mục home",
+    "sampling": "Đang lấy mẫu…",
+    "hostGroup": "Tài khoản máy chủ (AgentHub và tiến trình khác của host)",
+    "systemGroup": "Hệ thống (root và tài khoản khác)",
+    "disks": "Ổ đĩa",
+    "mount": "Điểm gắn",
+    "device": "Thiết bị",
+    "used": "Đã dùng",
+    "homesBadge": "home",
+    "gpus": "GPU"
+  }
+}
@@ -87,5 +87,6 @@
  "sidebar": "Thanh bên",
  "now": "bây giờ",
  "users": "Người dùng",
+  "admin": "Quản trị",
  "files": "Quản lý file"
 }
@@ -569,6 +569,46 @@ export interface MemberTmux {
  users: MemberTmuxRow[];
 }

+/** One account's (or the host's / other accounts') live share of the machine (`GET /api/host`). */
+export interface HostUsageGroup {
+  /** `user:<id>`, `host` (the host account outside any workspace) or `system`. */
+  key: string;
+  kind: "user" | "host" | "system";
+  userId?: number;
+  username?: string;
+  /** % of the whole machine's CPU (100 = every core busy) over the sample. */
+  cpu: number;
+  /** Resident memory, bytes (shared pages count in every process). */
+  memory: number;
+  memoryPercent: number;
+  processes: number;
+  /** Busiest processes, by the kernel's short name only. */
+  top: { pid: number; name: string; cpu: number; memory: number }[];
+}
+/** `GET /api/host` — hardware, load, disks and per-user usage. */
+export interface HostStats {
+  at: string;
+  hostname: string;
+  os: { platform: string; release: string; distro: string | null; arch: string };
+  uptime: number;
+  cpu: { model: string | null; cores: number; load: number[] };
+  memory: { total: number; available: number; used: number; swapTotal: number; swapUsed: number };
+  disks: {
+    device: string;
+    mount: string;
+    type: string;
+    kind: "HDD" | "SSD" | null;
+    total: number;
+    used: number;
+    free: number;
+  }[];
+  /** The mount holding the users' homes, or null. */
+  homesMount: string | null;
+  gpus: { name: string; utilization: number; memoryUsed: number; memoryTotal: number }[];
+  /** null off Linux. */
+  usage: { cpu: number; sampleMs: number; groups: HostUsageGroup[] } | null;
+}
+
 /** One user's home folder on disk (`GET /api/users/storage`); null = not measured. */
 export type UserStorage = {
  bytes: number;
@@ -918,6 +958,10 @@ export const api = {
    /** DELETE /api/me/avatar — back to the initials. */
    removeAvatar: () => request<MyAccount>("/me/avatar", { method: "DELETE" }),
  },
+  /** GET /api/host — the Server tab: hardware and each user's CPU/memory share (staff). */
+  host: {
+    stats: () => request<HostStats>("/host"),
+  },
  // ───────────────────────── Server mode staff views (routes/users.js) ─────────────────────────
  users: {
    /** URL of one account's avatar (admin/analyst), versioned by `avatarAt` (null = none). */
@@ -0,0 +1,66 @@
+/**
+ * @file Administration.tsx
+ * @description The Administration page (`/admin`, a sidebar item; `/users`
+ * redirects here), server mode only and only for an admin or analyst: a tab
+ * shell like `History.tsx`, the active tab in `?tab=` — **Users** (the
+ * accounts, the account pool and the audit log, `Users.tsx`) and **Server**
+ * (the machine's hardware and each user's share of it, `ServerPanel`).
+ * Local mode and a developer are sent home, like the Users page always did.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+import type { ComponentType } from "react";
+import { Navigate, useSearchParams } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Server, ShieldCheck, Users as UsersIcon } from "lucide-react";
+import { PageTabs } from "../components/PageTabs";
+import { useAuth } from "../components/AuthGate";
+import { ServerPanel } from "../components/admin/ServerPanel";
+import { Users } from "./Users";
+
+interface AdminTab {
+  id: string;
+  label: string;
+  Icon: ComponentType<{ className?: string }>;
+}
+
+export function Administration() {
+  const { t } = useTranslation("admin");
+  const auth = useAuth();
+  const [params, setParams] = useSearchParams();
+  const me = auth.state.mode === "server" ? auth.state.user : null;
+
+  if (!me || me.role === "developer") return <Navigate to="/" replace />;
+
+  const tabs: AdminTab[] = [
+    { id: "users", label: t("tabs.users"), Icon: UsersIcon },
+    { id: "server", label: t("tabs.server"), Icon: Server },
+  ];
+  const first = tabs[0]!;
+  const active = tabs.find((x) => x.id === params.get("tab")) ?? first;
+
+  return (
+    <div className="animate-fade-in space-y-6">
+      <div className="flex items-center gap-3">
+        <div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center">
+          <ShieldCheck className="w-4.5 h-4.5 text-accent" />
+        </div>
+        <div>
+          <h1 className="text-lg font-semibold text-fg-primary">{t("title")}</h1>
+          <p className="text-xs text-fg-muted">{t("description")}</p>
+        </div>
+      </div>
+      <PageTabs
+        ariaLabel={t("title")}
+        activeId={active.id}
+        onSelect={(id) => setParams(id === first.id ? {} : { tab: id }, { replace: true })}
+        tabs={tabs}
+      >
+        {active.id === "server" ? (
+          <ServerPanel isAdmin={me.role === "admin"} />
+        ) : (
+          <Users embedded />
+        )}
+      </PageTabs>
+    </div>
+  );
+}
@@ -1,6 +1,7 @@
 /**
 * @file Users.tsx
- * @description The Users page (`/users`, a sidebar item), server mode only and
+ * @description The Users tab of the Administration page (`/admin`, which
+ * `/users` redirects to — `Administration.tsx`), server mode only and
 * only for an admin or analyst (docs/SERVER-MODE.md): every account with its
 * role, state, workspaces, sessions, the tokens/$ it used in the last 7 and
 * 30 days (`GET /api/users`) and how much disk its home folder takes
@@ -9,9 +10,9 @@
 * an admin — add a user, and ONE Edit per row (`UserEditDialog`: profile,
 * role, active/disabled, password, owned workspaces, sign out everywhere, sent
 * as one change), and the Claude/Codex account pool every user's sessions run
- * on (`AccountPoolCard`), and (one Linux user per account) each member's own
- * tmux server beside the installed version, restartable by an admin
- * (`MemberTmuxCard`). Every change asks for the admin's OWN password again (the
+ * on (`AccountPoolCard`). (Each member's own tmux server — one Linux user per
+ * account — moved to the Server tab, `MemberTmuxCard` in `ServerPanel`.)
+ * Every change asks for the admin's OWN password again (the
 * server refuses without it); an analyst only reads. A row shows the display
 * name and email under the username when set; right-clicking a row offers
 * Edit, Open home (in /files), and copying the username or email.
@@ -51,7 +52,6 @@ import { ConfirmModal } from "../components/ConfirmModal";
 import { StatCard } from "../components/StatCard";
 import { ROLE_BADGE, UserEditDialog } from "../components/users/UserEditDialog";
 import { AccountPoolCard } from "../components/users/AccountPoolCard";
-import { MemberTmuxCard } from "../components/users/MemberTmuxCard";
 import { TableRowSkeleton } from "../components/Skeleton";
 import { ContextMenu, MenuItem, MenuSeparator, useContextMenu } from "../components/ContextMenu";
 import { copyText } from "../lib/clipboard";
@@ -59,7 +59,7 @@ import { copyText } from "../lib/clipboard";
 type Role = AuthUser["role"];
 const ROLES: Role[] = ["admin", "analyst", "developer"];

-export function Users() {
+export function Users({ embedded = false }: { embedded?: boolean } = {}) {
  const { t } = useTranslation("users");
  const auth = useAuth();
  const me = auth.state.mode === "server" ? auth.state.user : null;
@@ -132,11 +132,16 @@ export function Users() {
    <div className="animate-fade-in space-y-6">
      <div className="flex flex-wrap items-start justify-between gap-3">
        <div className="flex items-center gap-3">
-          <div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center">
-            <UsersIcon className="w-4.5 h-4.5 text-accent" />
-          </div>
+          {!embedded && (
+            <div className="w-9 h-9 rounded-xl bg-accent/15 flex items-center justify-center">
+              <UsersIcon className="w-4.5 h-4.5 text-accent" />
+            </div>
+          )}
          <div>
-            <h1 className="text-lg font-semibold text-fg-primary">{t("title")}</h1>
+            {/* Under Administration's tab bar the tab already names the page. */}
+            <h1 className={embedded ? "sr-only" : "text-lg font-semibold text-fg-primary"}>
+              {t("title")}
+            </h1>
            <p className="text-xs text-fg-muted">{t("description")}</p>
          </div>
        </div>
@@ -346,7 +351,6 @@ export function Users() {
        })()}

      <AccountPoolCard isAdmin={isAdmin} />
-      <MemberTmuxCard isAdmin={isAdmin} />

      <section className="card">
        <div className="flex items-center gap-2 px-5 py-4 border-b border-border">
@@ -0,0 +1,171 @@
+/**
+ * @file Administration.test.tsx
+ * @description The Administration page (`/admin`): local mode and a developer
+ * are sent home; staff land on the Users tab; the Server tab shows the
+ * machine's hardware, every disk, and each user's CPU/memory/home share from
+ * `GET /api/host`, with a user's busiest processes on click.
+ * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
+ */
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen, within } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import type { AuthState, HostStats } from "../../lib/api";
+
+let authState: AuthState = { mode: "local" };
+vi.mock("../../components/AuthGate", () => ({
+  useAuth: () => ({ state: authState, logout: async () => {} }),
+}));
+
+const GB = 1024 ** 3;
+const stats: HostStats = {
+  at: "2026-10-15T00:00:00Z",
+  hostname: "box",
+  os: { platform: "linux", release: "7.0.0", distro: "Ubuntu 26.04", arch: "x64" },
+  uptime: 90000,
+  cpu: { model: "i5-7500", cores: 4, load: [1, 0.5, 0.25] },
+  memory: { total: 16 * GB, available: 8 * GB, used: 8 * GB, swapTotal: 4 * GB, swapUsed: 0 },
+  disks: [
+    {
+      device: "/dev/sdb2",
+      mount: "/",
+      type: "ext4",
+      kind: "SSD",
+      total: 200 * GB,
+      used: 50 * GB,
+      free: 150 * GB,
+    },
+    {
+      device: "/dev/sda1",
+      mount: "/data",
+      type: "ext4",
+      kind: "HDD",
+      total: 500 * GB,
+      used: 0,
+      free: 500 * GB,
+    },
+  ],
+  homesMount: "/",
+  gpus: [],
+  usage: {
+    cpu: 40,
+    sampleMs: 1000,
+    groups: [
+      {
+        key: "user:2",
+        kind: "user",
+        userId: 2,
+        username: "mia",
+        cpu: 25,
+        memory: 2 * GB,
+        memoryPercent: 12.5,
+        processes: 3,
+        top: [{ pid: 77, name: "claude", cpu: 20, memory: GB }],
+      },
+      { key: "host", kind: "host", cpu: 5, memory: GB, memoryPercent: 6.3, processes: 90, top: [] },
+    ],
+  },
+};
+
+const api = vi.hoisted(() => ({
+  host: { stats: vi.fn() },
+  users: {
+    list: vi.fn(),
+    audit: vi.fn(),
+    storage: vi.fn(),
+    tmux: vi.fn(async () => ({ available: false, users: [] })),
+    avatarUrl: () => null,
+  },
+}));
+vi.mock("../../lib/api", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, unknown>>();
+  return {
+    ...actual,
+    api: {
+      ...api,
+      lanes: { list: vi.fn(async () => ({ lanes: [], counts: {} })) },
+      accountPool: { list: vi.fn(async () => ({ accounts: [], codex: [], blockPercent: 90 })) },
+    },
+  };
+});
+
+import { Administration } from "../Administration";
+
+const renderAt = (url: string) =>
+  render(
+    <MemoryRouter initialEntries={[url]}>
+      <Routes>
+        <Route path="/admin" element={<Administration />} />
+        <Route path="/" element={<div data-testid="home" />} />
+      </Routes>
+    </MemoryRouter>
+  );
+
+beforeEach(() => {
+  api.host.stats.mockResolvedValue(stats);
+  api.users.list.mockResolvedValue({
+    users: [
+      {
+        id: 1,
+        username: "boss",
+        role: "admin",
+        disabled: false,
+        workspaces: 0,
+        sessions: 0,
+        last7d: { cost: 0, tokens: 0 },
+        last30d: { cost: 0, tokens: 0 },
+      },
+      {
+        id: 2,
+        username: "mia",
+        role: "developer",
+        displayName: "Mia",
+        disabled: false,
+        workspaces: 1,
+        sessions: 2,
+        last7d: { cost: 0, tokens: 0 },
+        last30d: { cost: 0, tokens: 0 },
+      },
+    ],
+  });
+  api.users.audit.mockResolvedValue({ entries: [] });
+  api.users.storage.mockResolvedValue({
+    storage: { 2: { bytes: 20 * GB, files: 10, partial: false, measuredAt: "x" } },
+    measuring: false,
+  });
+});
+
+describe("Administration", () => {
+  it("sends local mode and a developer home", async () => {
+    authState = { mode: "local" };
+    renderAt("/admin");
+    expect(await screen.findByTestId("home")).toBeTruthy();
+    authState = { mode: "server", user: { id: 2, username: "mia", role: "developer" } };
+    renderAt("/admin");
+    expect((await screen.findAllByTestId("home")).length).toBeGreaterThan(0);
+  });
+
+  it("opens on the Users tab", async () => {
+    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
+    renderAt("/admin");
+    expect(await screen.findByTestId("users-table")).toBeTruthy();
+    expect(screen.getByRole("tab", { name: /users/i }).getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("shows hardware and each user's share on the Server tab", async () => {
+    authState = { mode: "server", user: { id: 1, username: "boss", role: "admin" } };
+    renderAt("/admin?tab=server");
+    const table = await screen.findByTestId("server-usage-table");
+    expect(await screen.findByText("box")).toBeTruthy();
+    expect(screen.getByTestId("server-disks-table").textContent).toContain("HDD");
+    const mia = await within(table).findByText("Mia");
+    const row = mia.closest("tr")!;
+    expect(row.textContent).toContain("25%");
+    expect(row.textContent).toContain("(13%)");
+    // 20 GB home on the 200 GB homes disk.
+    expect(row.textContent).toContain("10%");
+    expect(within(table).queryByText("claude")).toBeNull();
+    fireEvent.click(mia.closest("button")!);
+    expect(within(table).getByText("claude")).toBeTruthy();
+  });
+});