Add task executor bar chart, add system version string (#11155)

### What problem does this PR solve? - Add task executor bar chart - Add read version string ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 12:32:30 +08:00 · 2025-11-11 15:20:37 +08:00
parent 26cf5131c9
commit 7dd9758056
16 changed files with 315 additions and 78 deletions
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@ -38,7 +38,13 @@ const DialogContent = React.forwardRef<
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        'outline-0 fixed left-[50%] top-[50%] z-50 grid w-full max-w-xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-bg-base p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'outline-0 fixed left-[50%] top-[50%] rounded-lg z-50 grid w-full max-w-xl translate-x-[-50%] translate-y-[-50%] gap-4',
+        'border-0.5 border-border-button bg-bg-base p-6 shadow-lg duration-200 sm:rounded-lg',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+        'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+        'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
        className,
      )}
      {...props}
@ -66,6 +72,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
+      '-mx-6 -mt-6 p-6 border-b-0.5 border-border-button',
      'flex flex-col space-y-1.5 text-center sm:text-left',
      className,
    )}
@ -80,6 +87,7 @@ const DialogFooter = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
  <div
    className={cn(
+      // '-mx-6 -mb-6 px-12 pt-4 pb-8',
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-4',
      className,
    )}
--- a/web/src/components/ui/input.tsx
+++ b/web/src/components/ui/input.tsx
@ -40,6 +40,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
        ref={ref}
        type={isPasswordInput && showPassword ? 'text' : type}
        className={cn(
+          'peer/input',
          'flex h-8 w-full rounded-md border-0.5 border-input bg-bg-input px-3 py-2 outline-none text-sm text-text-primary',
          'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-text-disabled',
          'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent-primary',
@ -79,7 +80,12 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
            <Button
              variant="transparent"
              type="button"
-              className="border-0 absolute right-1 top-[50%] translate-y-[-50%]"
+              className="
+                absolute border-0 right-1 top-[50%] translate-y-[-50%]
+                dark:peer-autofill/input:text-text-secondary-inverse
+                dark:peer-autofill/input:hover:text-text-primary-inverse
+                dark:peer-autofill/input:focus-visible:text-text-primary-inverse
+              "
              onClick={() => setShowPassword(!showPassword)}
            >
              {showPassword ? (
--- a/web/src/components/ui/switch.tsx
+++ b/web/src/components/ui/switch.tsx
@ -13,7 +13,7 @@ const Switch = React.forwardRef<
    className={cn(
      'group/switch inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full',
      'border-2 border-transparent overflow-hidden transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary',
      'disabled:cursor-not-allowed disabled:opacity-50',
      'data-[state=checked]:bg-accent-primary data-[state=unchecked]:bg-text-sub-title',
      className,
--- a/web/src/locales/en.ts
+++ b/web/src/locales/en.ts
@ -1911,7 +1911,7 @@ Important structured information may include: names, dates, locations, events, k
      processing: 'Processing',
    },
    admin: {
-      loginTitle: 'RAGFlow ADMIN',
+      loginTitle: 'Admin Console',
      title: 'RAGFlow admin',
      confirm: 'Confirm',
      close: 'Close',
@ -1998,6 +1998,7 @@ Important structured information may include: names, dates, locations, events, k

      extraInfo: 'Extra information',
      serviceDetail: `Service {{name}} detail`,
+      taskExecutorDetail: 'Task executor detail',

      whitelistManagement: 'Whitelist management',
      exportAsExcel: 'Export Excel',
--- a/web/src/pages/admin/layouts/navigation-layout.tsx
+++ b/web/src/pages/admin/layouts/navigation-layout.tsx
@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NavLink, Outlet, useNavigate } from 'umi';

-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';

 import {
  LucideMonitor,
@ -15,7 +15,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { Routes } from '@/routes';
-import { logout } from '@/services/admin-service';
+import { getSystemVersion, logout } from '@/services/admin-service';

 import authorizationUtil from '@/utils/authorization-util';

@ -26,6 +26,11 @@ const AdminNavigationLayout = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

+  const { data: version } = useQuery({
+    queryKey: ['admin/version'],
+    queryFn: async () => (await getSystemVersion())?.data?.data?.version,
+  });
+
  const navItems = useMemo(
    () => [
      {
@ -109,8 +114,8 @@ const AdminNavigationLayout = () => {

        <div className="mt-auto space-y-4">
          <div className="flex justify-between items-center">
-            <span className="text-accent-primary">
-              vmm.ss.rr-nnn-commithash
+            <span className="leading-none text-xs text-accent-primary">
+              {version}
            </span>

            <ThemeSwitch />
--- a/web/src/pages/admin/roles.tsx
+++ b/web/src/pages/admin/roles.tsx
@ -280,24 +280,24 @@ function AdminRoles() {
      {/* Add role modal */}
      <Dialog open={isAddRoleModalOpen} onOpenChange={setAddRoleModalOpen}>
        <DialogContent
-          className="max-w-2xl p-0 border-border-button"
+          className="max-w-2xl"
          onAnimationEnd={() => {
            if (!isAddRoleModalOpen) {
              createRoleForm.form.reset();
            }
          }}
        >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
            <DialogTitle>{t('admin.addNewRole')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4">
+          <section className="px-6">
            <createRoleForm.FormComponent
              onSubmit={createRoleMutation.mutate}
            />
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
@ -324,18 +324,17 @@ function AdminRoles() {
        onOpenChange={setEditRoleDescriptionModalOpen}
      >
        <DialogContent
-          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!isEditRoleDescriptionModalOpen) {
              setRoleToMakeAction(null);
            }
          }}
        >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
            <DialogTitle>{t('admin.editRoleDescription')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4">
+          <section className="px-6">
            <form
              id={editRoleDescriptionFormId}
              onSubmit={(evt) => {
@ -360,7 +359,7 @@ function AdminRoles() {
            </form>
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
@ -383,18 +382,17 @@ function AdminRoles() {
      {/* Delete role modal */}
      <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
        <DialogContent
-          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!deleteModalOpen) {
              setRoleToMakeAction(null);
            }
          }}
        >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
            <DialogTitle>{t('admin.deleteRole')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4">
+          <section className="px-6">
            <DialogDescription className="text-text-primary">
              {t('admin.deleteRoleConfirmation')}
            </DialogDescription>
@ -404,7 +402,7 @@ function AdminRoles() {
            </div>
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
--- a/web/src/pages/admin/service-detail.tsx
+++ b/web/src/pages/admin/service-detail.tsx
@ -68,7 +68,7 @@ function ServiceDetail({ content }: ServiceDetailProps) {

    if (typeof content === 'string') {
      return (
-        <div className="rounded-lg p-4 bg-bg-card text-sm text-text-primary">
+        <div className="rounded-xl p-4 bg-bg-card text-sm text-text-primary">
          <pre>
            <code>
              {typeof content === 'string'
--- a/web/src/pages/admin/service-status.tsx
+++ b/web/src/pages/admin/service-status.tsx
@ -34,6 +34,7 @@ import {
 import {
  Dialog,
  DialogContent,
+  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
@ -66,7 +67,9 @@ import {
  getSortIcon,
 } from './utils';

+import JsonView from 'react18-json-view';
 import ServiceDetail from './service-detail';
+import TaskExecutorDetail from './task-executor-detail';

 const columnHelper = createColumnHelper<AdminService.ListServicesItem>();
 const globalFilterFn = createFuzzySearchFn<AdminService.ListServicesItem>([
@ -381,7 +384,7 @@ function AdminServiceStatus() {
      {/* Extra info modal*/}
      <Dialog open={extraInfoModalOpen} onOpenChange={setExtraInfoModalOpen}>
        <DialogContent
-          className="p-0 border-border-button"
+          className="flex flex-col max-h-[calc(100vh-4rem)] p-0 overflow-hidden"
          onAnimationEnd={() => {
            if (!extraInfoModalOpen) {
              setItemToMakeAction(null);
@ -392,15 +395,16 @@ function AdminServiceStatus() {
            <DialogTitle>{t('admin.extraInfo')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 pt-6 pb-4">
-            <div className="rounded-lg p-4 bg-bg-input">
-              <pre className="text-sm">
-                <code>
-                  {JSON.stringify(itemToMakeAction?.extra ?? {}, null, 2)}
-                </code>
-              </pre>
+          <DialogDescription className="sr-only" />
+
+          <ScrollArea className="h-0 flex-1 grid">
+            <div className="px-12">
+              <JsonView
+                src={itemToMakeAction?.extra ?? {}}
+                className="rounded-lg p-4 bg-bg-card break-words text-text-secondary"
+              />
            </div>
-          </section>
+          </ScrollArea>

          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
            <Button
@ -417,7 +421,7 @@ function AdminServiceStatus() {
      {/* Service details modal */}
      <Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
        <DialogContent
-          className="flex flex-col max-h-[calc(100vh-4rem)] max-w-6xl p-0 border-border-button"
+          className="flex flex-col max-h-[calc(100vh-4rem)] max-w-6xl p-0 overflow-hidden"
          onAnimationEnd={() => {
            if (!detailModalOpen) {
              setItemToMakeAction(null);
@ -426,14 +430,30 @@ function AdminServiceStatus() {
        >
          <DialogHeader className="p-6 border-b-0.5 border-border-button">
            <DialogTitle>
-              <Trans i18nKey="admin.serviceDetail">
-                {{ name: itemToMakeAction?.name }}
-              </Trans>
+              {itemToMakeAction?.service_type === 'task_executor' ? (
+                t('admin.taskExecutorDetail')
+              ) : (
+                <Trans i18nKey="admin.serviceDetail">
+                  {{ name: itemToMakeAction?.name }}
+                </Trans>
+              )}
            </DialogTitle>
          </DialogHeader>

-          <ScrollArea className="pt-6 pb-4 px-12 h-0 flex-1 text-text-secondary flex flex-col">
-            <ServiceDetail content={serviceDetails?.message} />
+          <DialogDescription className="sr-only" />
+
+          <ScrollArea className="h-0 flex-1 text-text-secondary grid">
+            <div className="px-12">
+              {itemToMakeAction?.service_type === 'task_executor' ? (
+                <TaskExecutorDetail
+                  content={
+                    serviceDetails?.message as AdminService.TaskExecutorInfo
+                  }
+                />
+              ) : (
+                <ServiceDetail content={serviceDetails?.message} />
+              )}
+            </div>
          </ScrollArea>

          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
--- a/web/src/pages/admin/task-executor-detail.tsx
+++ b/web/src/pages/admin/task-executor-detail.tsx
@ -0,0 +1,162 @@
+import dayjs from 'dayjs';
+import JsonView from 'react18-json-view';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend,
+  Rectangle,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+} from 'recharts';
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { formatDate, formatTime } from '@/utils/date';
+
+interface TaskExecutorDetailProps {
+  content?: AdminService.TaskExecutorInfo;
+}
+
+function CustomTooltip({ active, payload, ...restProps }: any) {
+  if (active && payload && payload.length) {
+    const item = payload.at(0)?.payload ?? {};
+
+    return (
+      <Card className="border bg-bg-base overflow-hidden shadow-xl">
+        <CardHeader className="px-3 py-2 text-text-primary bg-bg-title">
+          <CardTitle className="text-lg">
+            {formatDate(restProps.label)}
+          </CardTitle>
+        </CardHeader>
+
+        <CardContent className="p-0">
+          <ScrollArea className="px-3">
+            <div className="max-h-56">
+              <JsonView
+                src={item}
+                displaySize={30}
+                className="py-2 break-words text-text-secondary"
+              />
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return null;
+}
+
+function CustomAxisTick({ x, y, payload }: any) {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text
+        x={0}
+        y={0}
+        dy={8}
+        transform="rotate(60)"
+        textAnchor="start"
+        fill="rgb(var(--text-secondary))"
+      >
+        {formatTime(payload.value)}
+      </text>
+    </g>
+  );
+}
+
+function TaskExecutorDetail({ content }: TaskExecutorDetailProps) {
+  return (
+    <section className="space-y-8">
+      {Object.entries(content ?? {}).map(([name, data]) => {
+        const items = data.map((x) => ({
+          ...x,
+          done: Math.floor(Math.random() * 100),
+          failed: Math.floor(Math.random() * 100),
+          now: dayjs(x.now).valueOf(),
+        }));
+
+        const lastItem = items.at(-1);
+
+        return (
+          <Card key={name} className="border-0">
+            <CardHeader className="text-text-primary">
+              <CardTitle>{name}</CardTitle>
+
+              <div className="text-sm text-text-secondary space-x-4">
+                <span>Lag: {lastItem?.lag}</span>
+                <span>Pending: {lastItem?.pending}</span>
+              </div>
+            </CardHeader>
+
+            <CardContent>
+              <ResponsiveContainer className="min-h-40 w-full">
+                <BarChart
+                  data={items}
+                  margin={{ bottom: 32 }}
+                  className="text-sm text-text-secondary"
+                >
+                  <XAxis
+                    dataKey="now"
+                    type="number"
+                    scale="time"
+                    domain={['dataMin', 'dataMax']}
+                    tick={CustomAxisTick}
+                    interval="equidistantPreserveStart"
+                    angle={60}
+                    minTickGap={16}
+                    allowDataOverflow
+                    padding={{ left: 24, right: 24 }}
+                  />
+
+                  {/* <YAxis
+                      type="number"
+                      tick={{ fill: 'rgb(var(--text-secondary))' }}
+                    /> */}
+
+                  <CartesianGrid strokeDasharray="3 3" />
+
+                  <Tooltip
+                    trigger="click"
+                    content={CustomTooltip}
+                    wrapperStyle={{
+                      pointerEvents: 'auto',
+                    }}
+                  />
+
+                  <Legend wrapperStyle={{ bottom: 0 }} />
+
+                  <Bar
+                    dataKey="done"
+                    fill="rgb(var(--state-success))"
+                    activeBar={
+                      <Rectangle
+                        fill="rgb(var(--state-success))"
+                        stroke="var(--bg-base)"
+                      />
+                    }
+                  />
+
+                  <Bar
+                    dataKey="failed"
+                    fill="rgb(var(--state-error))"
+                    activeBar={
+                      <Rectangle
+                        fill="rgb(var(--state-error))"
+                        stroke="var(--bg-base)"
+                      />
+                    }
+                  />
+                </BarChart>
+              </ResponsiveContainer>
+            </CardContent>
+          </Card>
+        );
+      })}
+    </section>
+  );
+}
+
+export default TaskExecutorDetail;
--- a/web/src/pages/admin/users.tsx
+++ b/web/src/pages/admin/users.tsx
@ -91,6 +91,7 @@ import {
  parseBooleanish,
 } from './utils';

+import { DialogDescription } from '@radix-ui/react-dialog';
 import EnterpriseFeature from './components/enterprise-feature';

 const columnHelper = createColumnHelper<AdminService.ListUsersItem>();
@ -210,8 +211,8 @@ function AdminUserManagement() {
      columnHelper.accessor('nickname', {
        header: t('admin.nickname'),
        cell: ({ row, cell }) => (
-          <div className="flex items-center gap-2">
-            <span>{cell.getValue()}</span>
+          <div className="flex items-center">
+            <span className="mr-2 empty:hidden">{cell.getValue()}</span>

            {row.original.is_superuser ? (
              <Badge variant="secondary">{t('admin.superuser')}</Badge>
@ -553,20 +554,22 @@ function AdminUserManagement() {

      {/* Delete Confirmation Modal */}
      <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
-        <DialogContent className="p-0 border-border-button">
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+        <DialogContent>
+          <DialogHeader>
            <DialogTitle>{t('admin.deleteUser')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4 text-text-primary text-sm">
-            {t('admin.deleteUserConfirmation')}
+          <section className="px-6">
+            <DialogDescription>
+              {t('admin.deleteUserConfirmation')}
+            </DialogDescription>

            <div className="rounded-lg mt-6 p-4 border-0.5 border-border-button">
              {userToMakeAction?.email}
            </div>
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
@ -595,18 +598,17 @@ function AdminUserManagement() {
      {/* Change Password Modal */}
      <Dialog open={passwordModalOpen} onOpenChange={setPasswordModalOpen}>
        <DialogContent
-          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!passwordModalOpen) {
              changePasswordForm.form.reset();
            }
          }}
        >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
            <DialogTitle>{t('admin.changePassword')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4 text-text-secondary">
+          <section className="px-6">
            <changePasswordForm.FormComponent
              key="changePasswordForm"
              email={userToMakeAction?.email || ''}
@ -621,7 +623,7 @@ function AdminUserManagement() {
            />
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
@ -656,19 +658,19 @@ function AdminUserManagement() {
          createUserForm.form.reset();
        }}
      >
-        <DialogContent className="p-0 border-border-button">
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+        <DialogContent>
+          <DialogHeader>
            <DialogTitle>{t('admin.createNewUser')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4">
+          <section className="px-6">
            <createUserForm.FormComponent
              id={createUserForm.id}
              onSubmit={createUserMutation.mutate}
            />
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
--- a/web/src/pages/admin/whitelist.tsx
+++ b/web/src/pages/admin/whitelist.tsx
@ -349,18 +349,17 @@ function AdminWhitelist() {
      {/* Delete Confirmation Modal */}
      <Dialog open={deleteModalOpen} onOpenChange={setDeleteModalOpen}>
        <DialogContent
-          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!deleteModalOpen) {
              setItemToMakeAction(null);
            }
          }}
        >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
            <DialogTitle>{t('admin.deleteEmail')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4">
+          <section className="px-6">
            <DialogDescription className="text-text-primary">
              {t('admin.deleteWhitelistEmailConfirmation')}
            </DialogDescription>
@ -370,7 +369,7 @@ function AdminWhitelist() {
            </div>
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
@ -402,25 +401,24 @@ function AdminWhitelist() {
      {/* Create Email Modal */}
      <Dialog open={createModalOpen} onOpenChange={setCreateModalOpen}>
        <DialogContent
-          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!createModalOpen) {
              createEmailForm.form.reset();
            }
          }}
        >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
            <DialogTitle>{t('admin.createEmail')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4 text-text-secondary">
+          <section className="px-6">
            <createEmailForm.FormComponent
              id={createEmailForm.id}
              onSubmit={createWhitelistEntryMutation.mutate}
            />
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
@ -447,7 +445,6 @@ function AdminWhitelist() {
      {/* Edit Email Modal */}
      <Dialog open={editModalOpen} onOpenChange={setEditModalOpen}>
        <DialogContent
-          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!editModalOpen) {
              setItemToMakeAction(null);
@ -455,11 +452,11 @@ function AdminWhitelist() {
            }
          }}
        >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
            <DialogTitle>{t('admin.editEmail')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4 text-text-secondary">
+          <section className="px-6">
            <editEmailForm.FormComponent
              id={editEmailForm.id}
              onSubmit={(value) => {
@ -473,7 +470,7 @@ function AdminWhitelist() {
            />
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
@ -500,25 +497,24 @@ function AdminWhitelist() {
      {/* Import Excel Modal */}
      <Dialog open={importModalOpen} onOpenChange={setImportModalOpen}>
        <DialogContent
-          className="p-0 border-border-button"
          onAnimationEnd={() => {
            if (!importModalOpen) {
              importExcelForm.form.reset();
            }
          }}
        >
-          <DialogHeader className="p-6 border-b-0.5 border-border-button">
+          <DialogHeader>
            <DialogTitle>{t('admin.importWhitelist')}</DialogTitle>
          </DialogHeader>

-          <section className="px-12 py-4 text-text-secondary">
+          <section className="px-6">
            <importExcelForm.FormComponent
              id={importExcelForm.id}
              onSubmit={importExcelMutation.mutate}
            />
          </section>

-          <DialogFooter className="flex justify-end gap-4 px-12 pt-4 pb-8">
+          <DialogFooter className="gap-4 px-6 py-4">
            <Button
              className="px-4 h-10 dark:border-border-button"
              variant="outline"
--- a/web/src/services/admin-service.ts
+++ b/web/src/services/admin-service.ts
@ -101,8 +101,6 @@ request.interceptors.response.use(
 );

 const {
-  getSystemVersion: _getSystemVersion,
-
  adminLogin,
  adminLogout,
  adminListUsers,
@ -136,6 +134,8 @@ const {
  adminUpdateWhitelistEntry,
  adminDeleteWhitelistEntry,
  adminImportWhitelist,
+
+  adminGetSystemVersion,
 } = api;

 type ResponseData<D = NonNullable<unknown>> = {
@ -260,4 +260,4 @@ export const importWhitelistFromExcel = (file: File) => {
 };

 export const getSystemVersion = () =>
-  request.get<ResponseData<string>>(_getSystemVersion);
+  request.get<ResponseData<{ version: string }>>(adminGetSystemVersion);
--- a/web/src/services/admin.service.d.ts
+++ b/web/src/services/admin.service.d.ts
@ -66,6 +66,21 @@ declare module AdminService {
    title: string;
  };

+  export type TaskExectorHeartbeatItem = {
+    name: string;
+    boot_at: string;
+    now: string;
+    ip_address: string;
+    current: Record<string, object>;
+    done: number;
+    failed: number;
+    lag: number;
+    pending: number;
+    pid: number;
+  };
+
+  export type TaskExecutorInfo = Record<string, TaskExectorHeartbeatItem[]>;
+
  export type ListServicesItem = {
    extra: Record<string, unknown>;
    host: string;
@ -76,11 +91,17 @@ declare module AdminService {
    status: 'alive' | 'timeout' | 'fail';
  };

-  export type ServiceDetail = {
-    service_name: string;
-    status: 'alive' | 'timeout';
-    message: string | Record<string, any> | Record<string, any>[];
-  };
+  export type ServiceDetail =
+    | {
+        service_name: string;
+        status: 'alive' | 'timeout';
+        message: string | Record<string, any> | Record<string, any>[];
+      }
+    | {
+        service_name: 'task_executor';
+        status: 'alive' | 'timeout';
+        message: AdminService.TaskExecutorInfo;
+      };

  export type PermissionData = {
    enable: boolean;
--- a/web/src/utils/api.ts
+++ b/web/src/utils/api.ts
@ -271,4 +271,6 @@ export default {
  adminDeleteWhitelistEntry: (email: string) =>
    `${ExternalApi}${api_host}/admin/whitelist/${email}`,
  adminImportWhitelist: `${ExternalApi}${api_host}/admin/whitelist/batch`,
+
+  adminGetSystemVersion: `${ExternalApi}${api_host}/admin/version`,
 };
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -81,7 +81,15 @@ module.exports = {
        'text-primary': {
          DEFAULT: 'rgb(var(--text-primary) / <alpha-value>)',
        },
-        'text-secondary': 'var(--text-secondary)',
+        'text-primary-inverse': {
+          DEFAULT: 'rgb(var(--text-primary-inverse) / <alpha-value>)',
+        },
+        'text-secondary': {
+          DEFAULT: 'rgb(var(--text-secondary) / <alpha-value>)',
+        },
+        'text-secondary-inverse': {
+          DEFAULT: 'rgb(var(--text-secondary-inverse) / <alpha-value>)',
+        },
        'text-disabled': 'var(--text-disabled)',
        'text-input-tip': 'var(--text-input-tip)',
        'border-default': 'var(--border-default)',
--- a/web/tailwind.css
+++ b/web/tailwind.css
@ -102,7 +102,7 @@

    /* #161618 */
    --text-primary: 22 22 24;
-    --text-secondary: #75787a;
+    --text-secondary: 117 120 122;
    --text-disabled: #b2b5b7;
    /* input placeholder color */
    --text-input-tip: #b2b5b7;
@ -128,6 +128,10 @@
    --bg-group: rgba(90, 183, 126, 0.1);
    --bg-member: rgba(92, 150, 200, 0.1);
    --bg-department: rgba(136, 102, 211, 0.1);
+
+    /* --*-inverse: colors in dark mode */
+    --text-primary-inverse: 246 246 247;
+    --text-secondary-inverse: 178 181 183;
  }

  .dark {
@ -236,12 +240,16 @@

    /* #f6f6f7 */
    --text-primary: 246 246 247;
-    --text-secondary: #b2b5b7;
+    --text-secondary: 178 181 183;
    --text-disabled: #75787a;
    --text-input-tip: #75787a;
    --border-default: rgba(255, 255, 255, 0.2);
    --border-accent: #ffffff;
    --border-button: rgba(255, 255, 255, 0.1);
+
+    /* *-inverse: colors in light mode */
+    --text-primary-inverse: 22 22 24;
+    --text-secondary-inverse: 117 120 122;
  }
 }