Move to TypeScript 7 and the oxc toolchain (oxlint + oxfmt) (#6262)

* chore(frontend,docs): move to TypeScript 7 and replace ESLint with oxlint TypeScript 7 is the native Go port and ships no programmatic compiler API, so typescript-eslint cannot run at all: it peer-pins typescript >=4.8.4 <6.1.0 (canary too) and hard-crashes with "typescript-eslint does not support TS 7.0". Upstream support is tracked in typescript-eslint#10940 and targets TS >=7.1. Rather than wait, or carry Microsoft's side-by-side alias (which keeps a second TS 6 install alive purely to feed the linter), both projects move to oxlint, which never depended on the TypeScript API. Typecheck drops from ~9.7s to ~2.2s and 167 packages leave frontend/. oxlint has no no-restricted-syntax, so the #6121/#6127 cleared- InputNumber guard is reimplemented as a JS plugin in frontend/tools/oxlint/. It was verified to still fire in pages/settings/** and pages/xray/** and to stay exempt in *Modal.tsx. The type-aware @deprecated sweep survives too, as `npm run lint:deprecated`: oxlint's type-aware mode runs on oxlint-tsgolint, which drives the TS 7 typescript-go checker, so the TS 7 move is what makes it possible. Behaviour is preserved rather than tightened. jsx-a11y/prefer-tag-over-role is off in both configs because it was never part of the recommended sets ESLint actually ran, and oxlint honours the existing eslint-disable comments, so no source churn was needed. Two real fixes fell out of the stricter linting: - outbound-link-parser.test.ts used `out?.streamSettings` behind an `as` cast, which hid the optional chain from ESLint and would throw on a null parse; the rest of the file already used `out!`. - InputAddon's conditional role/tabIndex/onKeyDown is genuinely accessible but oxlint cannot evaluate it, so it gets a scoped disable. * chore(docs): replace Prettier with oxfmt oxfmt is the oxc project's Prettier-compatible formatter, so this pairs with the oxlint move and drops the last JS-based tool from the docs toolchain. The swap is behaviour-preserving. Running Prettier and oxfmt over the same files, with the existing .prettierrc.json settings migrated via `oxfmt --migrate=prettier`, produces byte-identical output on every file. (Comparing them outside the project directory is misleading: Prettier silently falls back to its defaults when it cannot find its config, which looks like a mismatch but is not one.) The 18 files reformatted here were already failing `pnpm format:check` before this change — Prettier wanted the exact same edits. The check is not part of docs-ci.yml, which is why the drift went unnoticed. .prettierignore becomes ignorePatterns in .oxfmtrc.json, keeping the deliberate MDX exclusion: reflowing MDX prose merges headings into paragraphs and collapses lists inside Steps/Callout components. Both that and the generated fumadocs-openapi reference output were verified untouched. oxfmt is pinned to 0.63.0 rather than latest. pnpm 11's built-in minimumReleaseAge policy rejects same-day releases, and 0.64.0 would have made pnpm silently append 20 waiver lines to pnpm-workspace.yaml. * style(frontend): adopt oxfmt and format src frontend/ has never had a formatter, so this reformats 344 of 497 files in src/. The change is purely whitespace, quoting and line wrapping — no logic is touched. It is kept in its own commit so it does not bury the TypeScript 7 / oxlint migration or the git blame for the code itself. Settings match docs/ and the code as it was already written: single quotes, semicolons, trailing commas, 2-space indent, 100 columns. That was measured rather than assumed — src/ was already uniformly single-quoted and 2-space indented, with p90 line length at 75. Formatting is scoped to src/ (mirroring `oxlint src`) and .oxfmtrc.json ignores src/generated. Both matter: `make gen-check` compares src/generated and public/openapi.json, and `make msw-worker-check` byte-compares public/mockServiceWorker.js against the installed MSW runtime, so reformatting any of them breaks the gate. Reflowing also moves `eslint-disable-next-line` comments off the line they guard, which broke two suppressions that had been silently correct before: - clone-inbound-modal.test.tsx: the object literal became multi-line, leaving `} as any;` four lines below its no-explicit-any disable. - ClientsPage.tsx: the useMemo dependency array moved onto its own line, out from under its exhaustive-deps disable. Both comments were relocated onto the line they actually guard, and verified to still suppress by removing them and watching the errors return. * ci: enforce formatting in CI and make verify Adding oxfmt in the previous two commits gave both projects a formatter but nothing that checks it, which is how docs/ had already drifted to 18 unformatted files: docs-ci.yml runs typecheck, lint, test and build, but never format:check, so Prettier's complaints were only ever visible to whoever ran it by hand. Wire `format:check` into the frontend job in ci.yml and the docs job in docs-ci.yml, and add a `format-check` target to `make verify` so the local gate keeps mirroring CI as the Makefile header promises. Verified the step actually bites rather than passing vacuously: adding a badly formatted line to a source file in each project makes both `make format-check` and `pnpm format:check` fail, and reverting it makes them pass again. No workflow referenced ESLint or Prettier by name — they all invoke the package scripts — so the tooling swap needed no other CI changes. * ci: trigger CI on Makefile changes The path filters listed **.go, go.mod, go.sum, frontend/**, .nvmrc and ci.yml itself, but not the Makefile — so a change to the canonical task runner that ci.yml is meant to mirror could land without any job running. The previous commit, which edits both, only triggers because it happens to touch ci.yml too. * fix(frontend): replace deprecated Ant Design 6 APIs in the geo components `npm run lint:deprecated` reported five uses of props Ant Design 6 has deprecated. All five are gone, and the matching runtime warnings no longer appear in the test output. Tag `bordered={false}` becomes `variant="filled"` and Space `direction` becomes `orientation`; both are the one-to-one replacements named in antd's own deprecation messages, and `direction`/`orientation` share the same Orientation type. Input `addonAfter` is the one that is not a rename. It becomes a `Space.Compact block` wrapping the Input and the browse Button, which is antd's documented migration. `block` keeps the field filling its form row as the addon did. Note this is a deliberate visual change: the button used to be a borderless `type="text"` icon sitting inside the addon's grey box, and is now a regular button whose border joins the input. The tooltip, aria-label, ref, id and onBlur wiring are unchanged, so the react-hook-form binding in RuleFormModal and the existing tests still address it the same way. Only these five were deprecated. The other `bordered` props in the tree sit on QRCode, Table, Descriptions and Alert, where the prop is not deprecated, and these were the only two Space `direction` uses in the codebase. * fix(frontend): restore lint rules lost in the oxlint migration, and test the guard Addresses the review on #6262. The frontend config re-enabled only no-explicit-any and no-unused-vars and left the rest of tseslint's recommended set to oxlint's correctness category. It does not cover all of it. Confirmed by linting one probe file against both configs: docs/ (which enumerates the rules) reports all nine, frontend/ reported four. So ban-ts-comment, no-empty-object-type, no-namespace, no-require-imports and no-unsafe-function-type had silently stopped being enforced — a `// @ts-ignore` or a `namespace` block would have landed unflagged. The ten rules are now mirrored from docs/.oxlintrc.json, and src/ still passes. The #6121/#6127 guard was 57 lines of hand-written AST walking with no test. It now has one: fixtures for the three banned shapes plus an onNumber()-wrapped control, asserting the rule fires three times and that .oxlintrc.json still wires it to the right paths. Verified it fails for the right reason by making walk() enumerate nothing, which is the silent-death mode the review described — the traversal depends on Object.keys() seeing AST children as own enumerable properties. The fixtures deliberately violate the rule, so their oxlint config is named guard.oxlintrc.json rather than .oxlintrc.json: oxlint discovers nested configs by directory, which would otherwise turn the fixtures into three lint errors. The test passes it explicitly with -c. Also from the review: - lint and format now cover tools/ as well as src/, so the one piece of hand-written lint logic in the repo is no longer the least covered file in it. - lint-staged runs oxfmt before oxlint --fix. Formatting became a hard CI gate in this PR while the hook only ran the linter, so a commit could pass the hook and fail CI on formatting alone. - .oxfmtrc.json ignores public/, so the artefacts that make gen-check and make msw-worker-check byte-compare stay safe even if oxfmt is invoked without a path argument. - The MDX and generated-reference rationales that .prettierignore carried are back as comments in docs/.oxfmtrc.json — oxlint and oxfmt both accept JSONC, so relocating them was unnecessary. Not applied: the review also suggested restoring ../internal/web/dist to the ignore lists. Both tools reject `..` patterns outright ("patterns are resolved within the config file's directory"), and being outside frontend/ it is unreachable anyway.
2026-08-29 06:27:14 +00:00 · 2026-08-19 15:36:27 +02:00
parent 380aff4d82
commit 92fb94d856
388 changed files with 19613 additions and 14133 deletions
@@ -18,7 +18,12 @@ interface BackupModalProps {
  onBusy: (e: BusyEvent) => void;
 }

-export default function BackupModal({ open, basePath: _basePath, onClose, onBusy }: BackupModalProps) {
+export default function BackupModal({
+  open,
+  basePath: _basePath,
+  onClose,
+  onBusy,
+}: BackupModalProps) {
  const { t } = useTranslation();
  const isPostgres = window.X_UI_DB_TYPE === 'postgres';
  const [keepHostSettings, setKeepHostSettings] = useState(true);
@@ -67,12 +72,7 @@ export default function BackupModal({ open, basePath: _basePath, onClose, onBusy
  }

  return (
-    <Modal
-      open={open}
-      title={t('pages.index.backupTitle')}
-      footer={null}
-      onCancel={onClose}
-    >
+    <Modal open={open} title={t('pages.index.backupTitle')} footer={null} onCancel={onClose}>
      {isPostgres && (
        <div className="backup-description" style={{ marginBottom: 16 }}>
          {t('pages.index.backupPostgresNote')}
@@ -83,10 +83,17 @@ export default function BackupModal({ open, basePath: _basePath, onClose, onBusy
          <div className="backup-meta">
            <div className="backup-title">{t('pages.index.exportDatabase')}</div>
            <div className="backup-description">
-              {isPostgres ? t('pages.index.exportDatabasePgDesc') : t('pages.index.exportDatabaseDesc')}
+              {isPostgres
+                ? t('pages.index.exportDatabasePgDesc')
+                : t('pages.index.exportDatabaseDesc')}
            </div>
          </div>
-          <Button type="primary" aria-label={t('pages.index.exportDatabase')} onClick={exportDb} icon={<DownloadOutlined />} />
+          <Button
+            type="primary"
+            aria-label={t('pages.index.exportDatabase')}
+            onClick={exportDb}
+            icon={<DownloadOutlined />}
+          />
        </div>

        {isPostgres && (
@@ -95,7 +102,12 @@ export default function BackupModal({ open, basePath: _basePath, onClose, onBusy
              <div className="backup-title">{t('pages.index.migrationDownload')}</div>
              <div className="backup-description">{t('pages.index.migrationDownloadPgDesc')}</div>
            </div>
-            <Button type="primary" aria-label={t('pages.index.migrationDownload')} onClick={exportMigration} icon={<DownloadOutlined />} />
+            <Button
+              type="primary"
+              aria-label={t('pages.index.migrationDownload')}
+              onClick={exportMigration}
+              icon={<DownloadOutlined />}
+            />
          </div>
        )}

@@ -103,15 +115,25 @@ export default function BackupModal({ open, basePath: _basePath, onClose, onBusy
          <div className="backup-meta">
            <div className="backup-title">{t('pages.index.importDatabase')}</div>
            <div className="backup-description">
-              {isPostgres ? t('pages.index.importDatabasePgDesc') : t('pages.index.importDatabaseDesc')}
+              {isPostgres
+                ? t('pages.index.importDatabasePgDesc')
+                : t('pages.index.importDatabaseDesc')}
            </div>
          </div>
-          <Button type="primary" aria-label={t('pages.index.importDatabase')} onClick={importDb} icon={<UploadOutlined />} />
+          <Button
+            type="primary"
+            aria-label={t('pages.index.importDatabase')}
+            onClick={importDb}
+            icon={<UploadOutlined />}
+          />
        </div>

        <div className="backup-item">
          <div className="backup-meta">
-            <Checkbox checked={keepHostSettings} onChange={(e) => setKeepHostSettings(e.target.checked)}>
+            <Checkbox
+              checked={keepHostSettings}
+              onChange={(e) => setKeepHostSettings(e.target.checked)}
+            >
              {t('pages.index.importKeepHostSettings')}
            </Checkbox>
            <div className="backup-description">{t('pages.index.importKeepHostSettingsDesc')}</div>
@@ -13,7 +13,13 @@ interface ConnectionsCardProps {
  isMobile: boolean;
 }

-export default function ConnectionsCard({ status, tcp, udp, labels, isMobile }: ConnectionsCardProps) {
+export default function ConnectionsCard({
+  status,
+  tcp,
+  udp,
+  labels,
+  isMobile,
+}: ConnectionsCardProps) {
  const { t } = useTranslation();
  const { token } = theme.useToken();
  const accent = token.colorPrimary;
@@ -68,8 +68,14 @@
 }

@keyframes ovPulse {
-  0% { transform: scale(0.9); opacity: 0.5; }
-  100% { transform: scale(2.4); opacity: 0; }
+  0% {
+    transform: scale(0.9);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.4);
+    opacity: 0;
+  }
 }

@media (prefers-reduced-motion: reduce) {
@@ -195,11 +201,15 @@
 }

@media (max-width: 1100px) {
-  .ov-vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ov-vitals {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }

@media (max-width: 560px) {
-  .ov-vitals { grid-template-columns: minmax(0, 1fr); }
+  .ov-vitals {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }

 .ov-tile {
@@ -270,7 +280,9 @@
 }

@media (max-width: 1100px) {
-  .ov-mid { grid-template-columns: minmax(0, 1fr); }
+  .ov-mid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }

 .ov-wide-head {
@@ -388,22 +400,27 @@
   uptime (xray | os) · panel (memory | threads) · ip addresses */
 .ov-strip-grid {
  display: grid;
-  grid-template-columns:
-    minmax(max-content, 1.2fr) minmax(max-content, 1.2fr) minmax(0, 1.6fr);
+  grid-template-columns: minmax(max-content, 1.2fr) minmax(max-content, 1.2fr) minmax(0, 1.6fr);
  gap: 16px;
  padding: var(--ov-pad);
 }

@media (max-width: 1439px) {
-  .ov-strip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+  .ov-strip-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }

@media (max-width: 1100px) {
-  .ov-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ov-strip-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }

@media (max-width: 560px) {
-  .ov-strip-grid { grid-template-columns: minmax(0, 1fr); }
+  .ov-strip-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
 }

@media (min-width: 1440px) {
@@ -11,7 +11,12 @@ import {
 } from '@ant-design/icons';

 import { HttpUtil, CPUFormatter, SizeFormatter, ClipboardManager, FileManager } from '@/utils';
-import { USAGE_CRIT_COLOR, USAGE_CRIT_PERCENT, USAGE_WARN_COLOR, USAGE_WARN_PERCENT } from '@/models/status';
+import {
+  USAGE_CRIT_COLOR,
+  USAGE_CRIT_PERCENT,
+  USAGE_WARN_COLOR,
+  USAGE_WARN_PERCENT,
+} from '@/models/status';
 import { useTheme } from '@/hooks/useTheme';
 import { useStatusQuery } from '@/api/queries/useStatusQuery';
 import { useMediaQuery } from '@/hooks/useMediaQuery';
@@ -41,7 +46,9 @@ export default function IndexPage() {
  const { status, fetched, fetchError, refresh } = useStatusQuery();
  const { isMobile } = useMediaQuery();
  const [messageApi, messageContextHolder] = message.useMessage();
-  useEffect(() => { setMessageInstance(messageApi); }, [messageApi]);
+  useEffect(() => {
+    setMessageInstance(messageApi);
+  }, [messageApi]);

  const [accessLogEnable, setAccessLogEnable] = useState(false);
  const [devChannelEnable, setDevChannelEnable] = useState(false);
@@ -87,13 +94,10 @@ export default function IndexPage() {
    [panelUpdateInfo.currentVersion],
  );

-  const setBusy = useCallback(
-    ({ busy, tip }: { busy: boolean; tip?: string }) => {
-      setLoading(busy);
-      if (tip) setLoadingTip(tip);
-    },
-    [],
-  );
+  const setBusy = useCallback(({ busy, tip }: { busy: boolean; tip?: string }) => {
+    setLoading(busy);
+    if (tip) setLoadingTip(tip);
+  }, []);

  const stopXray = useCallback(async () => {
    await HttpUtil.post('/panel/api/server/stopXrayService');
@@ -147,9 +151,14 @@ export default function IndexPage() {
    ];
    const list = (xs: typeof items) => xs.map((i) => `${i.name} ${i.value.toFixed(0)}%`).join(', ');
    const crit = items.filter((i) => i.value >= USAGE_CRIT_PERCENT);
-    if (crit.length) return { text: t('pages.index.healthCritical', { list: list(crit) }), color: USAGE_CRIT_COLOR };
+    if (crit.length)
+      return {
+        text: t('pages.index.healthCritical', { list: list(crit) }),
+        color: USAGE_CRIT_COLOR,
+      };
    const warm = items.filter((i) => i.value >= USAGE_WARN_PERCENT);
-    if (warm.length) return { text: t('pages.index.healthWarm', { list: list(warm) }), color: USAGE_WARN_COLOR };
+    if (warm.length)
+      return { text: t('pages.index.healthWarm', { list: list(warm) }), color: USAGE_WARN_COLOR };
    return null;
  }, [status, t]);

@@ -174,7 +183,11 @@ export default function IndexPage() {
                  status="error"
                  title={t('somethingWentWrong')}
                  subTitle={fetchError}
-                  extra={<Button type="primary" onClick={refresh}>{t('refresh')}</Button>}
+                  extra={
+                    <Button type="primary" onClick={refresh}>
+                      {t('refresh')}
+                    </Button>
+                  }
                />
              ) : (
                <div className="ov-page">
@@ -329,9 +342,7 @@ export default function IndexPage() {
            open={configTextOpen}
            title={t('pages.index.config')}
            width={isMobile ? '100%' : 900}
-            style={isMobile
-              ? { top: 20, maxWidth: 'calc(100vw - 16px)' }
-              : { top: 20 }}
+            style={isMobile ? { top: 20, maxWidth: 'calc(100vw - 16px)' } : { top: 20 }}
            onCancel={() => setConfigTextOpen(false)}
            footer={[
              <Button
@@ -151,7 +151,7 @@ body.dark .log-container {
  --log-divider: rgba(255, 255, 255, 0.1);
 }

-html[data-theme="ultra-dark"] .log-container {
+html[data-theme='ultra-dark'] .log-container {
  --log-stamp: #7fb6f1;
  --log-debug: #7fb6f1;
  --log-info: #5fd9b0;
@@ -72,7 +72,15 @@ export default function LogModal({ open, onClose }: LogModalProps) {
  const titleNode = (
    <>
      {t('pages.index.logs')}
-      <SyncOutlined spin={loading} className="reload-icon" role="button" tabIndex={0} aria-label={t('refresh')} onClick={refresh} onKeyDown={activateOnKey(refresh)} />
+      <SyncOutlined
+        spin={loading}
+        className="reload-icon"
+        role="button"
+        tabIndex={0}
+        aria-label={t('refresh')}
+        onClick={refresh}
+        onKeyDown={activateOnKey(refresh)}
+      />
    </>
  );

@@ -126,7 +134,12 @@ export default function LogModal({ open, onClose }: LogModalProps) {
          </Checkbox>
        </Form.Item>
        <Form.Item className="download-item">
-          <Button type="primary" onClick={download} icon={<DownloadOutlined />} aria-label={t('download')} />
+          <Button
+            type="primary"
+            onClick={download}
+            icon={<DownloadOutlined />}
+            aria-label={t('download')}
+          />
        </Form.Item>
      </Form>

@@ -162,7 +175,9 @@ export default function LogModal({ open, onClose }: LogModalProps) {
            <div key={idx} className="log-line">
              {log.stamp && <span className="log-stamp">{log.stamp}</span>}
              {log.stamp && log.levelText ? ' ' : ''}
-              {log.levelText && <span className={`log-level ${log.levelClass}`}>{log.levelText}</span>}
+              {log.levelText && (
+                <span className={`log-level ${log.levelClass}`}>{log.levelText}</span>
+              )}
              {(log.body || log.service) && (
                <>
                  {(log.stamp || log.levelText) && <span> - </span>}
@@ -75,20 +75,58 @@ export default function OverviewActionBar({

  const actionGroups: BarAction[][] = [
    [
-      { key: 'restart', icon: <ReloadOutlined />, text: t('pages.index.restartXray'), onClick: onRestartXray, primary: true },
-      { key: 'stop', icon: <PoweroffOutlined />, text: t('pages.index.stopXray'), onClick: onStopXray },
+      {
+        key: 'restart',
+        icon: <ReloadOutlined />,
+        text: t('pages.index.restartXray'),
+        onClick: onRestartXray,
+        primary: true,
+      },
+      {
+        key: 'stop',
+        icon: <PoweroffOutlined />,
+        text: t('pages.index.stopXray'),
+        onClick: onStopXray,
+      },
    ],
    [
      { key: 'logs', icon: <BarsOutlined />, text: t('pages.index.logs'), onClick: onOpenLogs },
      ...(accessLogEnable
-        ? [{ key: 'accessLogs', icon: <FileTextOutlined />, text: t('pages.index.accessLogs'), onClick: onOpenXrayLogs }]
+        ? [
+            {
+              key: 'accessLogs',
+              icon: <FileTextOutlined />,
+              text: t('pages.index.accessLogs'),
+              onClick: onOpenXrayLogs,
+            },
+          ]
        : []),
-      { key: 'config', icon: <ControlOutlined />, text: t('pages.index.config'), onClick: onOpenConfig },
-      { key: 'backup', icon: <CloudServerOutlined />, text: t('pages.index.backupTitle'), onClick: onOpenBackup },
+      {
+        key: 'config',
+        icon: <ControlOutlined />,
+        text: t('pages.index.config'),
+        onClick: onOpenConfig,
+      },
+      {
+        key: 'backup',
+        icon: <CloudServerOutlined />,
+        text: t('pages.index.backupTitle'),
+        onClick: onOpenBackup,
+      },
    ],
    [
-      { key: 'history', icon: <AreaChartOutlined />, text: t('pages.index.systemHistoryTitle'), onClick: onOpenSystemHistory },
-      { key: 'metrics', icon: <ArrowUpOutlined />, text: t('pages.index.xrayMetricsTitle'), onClick: onOpenXrayMetrics },
+      {
+        key: 'history',
+        icon: <AreaChartOutlined />,
+        text: t('pages.index.systemHistoryTitle'),
+        onClick: onOpenSystemHistory,
+      },
+      {
+        key: 'metrics',
+        icon: <ArrowUpOutlined />,
+        text: t('pages.index.xrayMetricsTitle'),
+        onClick: onOpenXrayMetrics,
+      },
    ],
  ];

@@ -98,11 +136,7 @@ export default function OverviewActionBar({
      <span>{`${t('pages.index.xrayStatus')} · ${stateText}`}</span>
      {hasVersion && (
        <Tooltip title={t('pages.index.xraySwitch')}>
-          <button
-            type="button"
-            className="ov-state-version"
-            onClick={onOpenVersionSwitch}
-          >
+          <button type="button" className="ov-state-version" onClick={onOpenVersionSwitch}>
            {`v${status.xray.version}`}
          </button>
        </Tooltip>
@@ -83,7 +83,10 @@ export default function PanelUpdateModal({
  function updatePanel() {
    modal.confirm({
      title: t('pages.index.panelUpdateDialog'),
-      content: t('pages.index.panelUpdateDialogDesc').replace('#version#', info.latestVersion || ''),
+      content: t('pages.index.panelUpdateDialogDesc').replace(
+        '#version#',
+        info.latestVersion || '',
+      ),
      okText: t('confirm'),
      cancelText: t('cancel'),
      onOk: async () => {
@@ -104,8 +107,16 @@ export default function PanelUpdateModal({
          return;
        }
        modal[outcome === 'failed' ? 'error' : 'warning']({
-          title: t(outcome === 'failed' ? 'pages.index.panelUpdateFailedTitle' : 'pages.index.panelUpdateUnknownTitle'),
-          content: t(outcome === 'failed' ? 'pages.index.panelUpdateFailedDesc' : 'pages.index.panelUpdateUnknownDesc'),
+          title: t(
+            outcome === 'failed'
+              ? 'pages.index.panelUpdateFailedTitle'
+              : 'pages.index.panelUpdateUnknownTitle',
+          ),
+          content: t(
+            outcome === 'failed'
+              ? 'pages.index.panelUpdateFailedDesc'
+              : 'pages.index.panelUpdateUnknownDesc',
+          ),
          okText: t('refresh'),
          onOk: () => window.location.reload(),
        });
@@ -116,12 +127,7 @@ export default function PanelUpdateModal({
  return (
    <>
      {contextHolder}
-      <Modal
-        open={open}
-        title={t('pages.index.updatePanel')}
-        footer={null}
-        onCancel={onClose}
-      >
+      <Modal open={open} title={t('pages.index.updatePanel')} footer={null} onCancel={onClose}>
        {info.updateAvailable && (
          <Alert
            type="warning"
@@ -134,11 +140,7 @@ export default function PanelUpdateModal({
        <div className="version-list">
          <div className="version-list-item">
            <span>{t('pages.index.devChannel')}</span>
-            <Switch
-              checked={!!devChannelEnable}
-              loading={channelBusy}
-              onChange={handleChannel}
-            />
+            <Switch checked={!!devChannelEnable} loading={channelBusy} onChange={handleChannel} />
          </div>
        </div>

@@ -153,16 +155,22 @@ export default function PanelUpdateModal({

        <div className="version-list">
          <div className="version-list-item">
-            <span>{isDev ? t('pages.index.currentCommit') : t('pages.index.currentPanelVersion')}</span>
+            <span>
+              {isDev ? t('pages.index.currentCommit') : t('pages.index.currentPanelVersion')}
+            </span>
            {isDev ? (
              <Tag color="green">{info.currentCommit || '?'}</Tag>
            ) : (
-              <Tag color="green">{formatPanelVersion(window.X_UI_CUR_VER || info.currentVersion) || '?'}</Tag>
+              <Tag color="green">
+                {formatPanelVersion(window.X_UI_CUR_VER || info.currentVersion) || '?'}
+              </Tag>
            )}
          </div>
          {info.updateAvailable ? (
            <div className="version-list-item">
-              <span>{isDev ? t('pages.index.latestCommit') : t('pages.index.latestPanelVersion')}</span>
+              <span>
+                {isDev ? t('pages.index.latestCommit') : t('pages.index.latestPanelVersion')}
+              </span>
              <Tag color="purple">{(isDev ? info.latestCommit : info.latestVersion) || '-'}</Tag>
            </div>
          ) : (
@@ -24,7 +24,11 @@
  margin: 8px 8px 16px;
  padding: 16px 18px 18px;
  border-radius: 14px;
-  background: linear-gradient(180deg, color-mix(in srgb, var(--ant-color-primary) 6%, transparent), transparent);
+  background: linear-gradient(
+    180deg,
+    color-mix(in srgb, var(--ant-color-primary) 6%, transparent),
+    transparent
+  );
  border: 1px solid var(--ant-color-border-secondary);
  box-shadow: 0 2px 12px var(--ant-color-fill-quaternary);
 }
@@ -45,15 +45,123 @@ interface MetricDef {
 }

 const METRICS: MetricDef[] = [
-  { key: 'cpu', tab: 'CPU', tabKey: 'pages.index.cpu', title: 'pages.index.historyTitleCpu', icon: <DashboardOutlined />, valueMax: 100, unit: '%', stroke: '' },
-  { key: 'mem', tab: 'RAM', tabKey: 'pages.index.memory', title: 'pages.index.historyTitleMem', icon: <DatabaseOutlined />, valueMax: 100, unit: '%', stroke: '#7c4dff', key2: 'swap', stroke2: '#ffa940', name1: 'pages.index.memory', name2: 'pages.index.swap' },
-  { key: 'netUp', tab: 'Bandwidth', tabKey: 'pages.index.historyTabBandwidth', title: 'pages.index.historyTitleNetwork', icon: <GlobalOutlined />, valueMax: null, unit: 'B/s', stroke: '#1890ff', key2: 'netDown', stroke2: '#13c2c2', name1: 'Up', name2: 'Down' },
-  { key: 'pktUp', tab: 'Packets', tabKey: 'pages.index.historyTabPackets', title: 'pages.index.historyTitlePackets', icon: <DeploymentUnitOutlined />, valueMax: null, unit: 'pkt/s', stroke: '#2f54eb', key2: 'pktDown', stroke2: '#36cfc9', name1: 'Up', name2: 'Down' },
-  { key: 'tcpCount', tab: 'Connections', tabKey: 'pages.index.historyTabConnections', title: 'pages.index.historyTitleConnections', icon: <ApiOutlined />, valueMax: null, unit: '', stroke: '#597ef7', key2: 'udpCount', stroke2: '#73d13d', name1: 'TCP', name2: 'UDP' },
-  { key: 'diskRead', tab: 'Disk I/O', tabKey: 'pages.index.historyTabDisk', title: 'pages.index.historyTitleDisk', icon: <HddOutlined />, valueMax: null, unit: 'B/s', stroke: '#eb2f96', key2: 'diskWrite', stroke2: '#722ed1', name1: 'Read', name2: 'Write' },
-  { key: 'diskUsage', tab: 'Disk Usage', tabKey: 'pages.index.historyTabDiskUsage', title: 'pages.index.historyTitleDiskUsage', icon: <PieChartOutlined />, valueMax: 100, unit: '%', stroke: '#13c2c2' },
-  { key: 'online', tab: 'Online', tabKey: 'pages.index.historyTabOnline', title: 'pages.index.historyTitleOnline', icon: <TeamOutlined />, valueMax: null, unit: '', stroke: '#52c41a' },
-  { key: 'load1', tab: 'Load', tabKey: 'pages.index.historyTabLoad', title: 'pages.index.historyTitleLoad', icon: <LineChartOutlined />, valueMax: null, unit: '', stroke: '#fa8c16', key2: 'load5', stroke2: '#f5222d', name1: '1m', name2: '5m', key3: 'load15', stroke3: '#a0d911', name3: '15m' },
+  {
+    key: 'cpu',
+    tab: 'CPU',
+    tabKey: 'pages.index.cpu',
+    title: 'pages.index.historyTitleCpu',
+    icon: <DashboardOutlined />,
+    valueMax: 100,
+    unit: '%',
+    stroke: '',
+  },
+  {
+    key: 'mem',
+    tab: 'RAM',
+    tabKey: 'pages.index.memory',
+    title: 'pages.index.historyTitleMem',
+    icon: <DatabaseOutlined />,
+    valueMax: 100,
+    unit: '%',
+    stroke: '#7c4dff',
+    key2: 'swap',
+    stroke2: '#ffa940',
+    name1: 'pages.index.memory',
+    name2: 'pages.index.swap',
+  },
+  {
+    key: 'netUp',
+    tab: 'Bandwidth',
+    tabKey: 'pages.index.historyTabBandwidth',
+    title: 'pages.index.historyTitleNetwork',
+    icon: <GlobalOutlined />,
+    valueMax: null,
+    unit: 'B/s',
+    stroke: '#1890ff',
+    key2: 'netDown',
+    stroke2: '#13c2c2',
+    name1: 'Up',
+    name2: 'Down',
+  },
+  {
+    key: 'pktUp',
+    tab: 'Packets',
+    tabKey: 'pages.index.historyTabPackets',
+    title: 'pages.index.historyTitlePackets',
+    icon: <DeploymentUnitOutlined />,
+    valueMax: null,
+    unit: 'pkt/s',
+    stroke: '#2f54eb',
+    key2: 'pktDown',
+    stroke2: '#36cfc9',
+    name1: 'Up',
+    name2: 'Down',
+  },
+  {
+    key: 'tcpCount',
+    tab: 'Connections',
+    tabKey: 'pages.index.historyTabConnections',
+    title: 'pages.index.historyTitleConnections',
+    icon: <ApiOutlined />,
+    valueMax: null,
+    unit: '',
+    stroke: '#597ef7',
+    key2: 'udpCount',
+    stroke2: '#73d13d',
+    name1: 'TCP',
+    name2: 'UDP',
+  },
+  {
+    key: 'diskRead',
+    tab: 'Disk I/O',
+    tabKey: 'pages.index.historyTabDisk',
+    title: 'pages.index.historyTitleDisk',
+    icon: <HddOutlined />,
+    valueMax: null,
+    unit: 'B/s',
+    stroke: '#eb2f96',
+    key2: 'diskWrite',
+    stroke2: '#722ed1',
+    name1: 'Read',
+    name2: 'Write',
+  },
+  {
+    key: 'diskUsage',
+    tab: 'Disk Usage',
+    tabKey: 'pages.index.historyTabDiskUsage',
+    title: 'pages.index.historyTitleDiskUsage',
+    icon: <PieChartOutlined />,
+    valueMax: 100,
+    unit: '%',
+    stroke: '#13c2c2',
+  },
+  {
+    key: 'online',
+    tab: 'Online',
+    tabKey: 'pages.index.historyTabOnline',
+    title: 'pages.index.historyTitleOnline',
+    icon: <TeamOutlined />,
+    valueMax: null,
+    unit: '',
+    stroke: '#52c41a',
+  },
+  {
+    key: 'load1',
+    tab: 'Load',
+    tabKey: 'pages.index.historyTabLoad',
+    title: 'pages.index.historyTitleLoad',
+    icon: <LineChartOutlined />,
+    valueMax: null,
+    unit: '',
+    stroke: '#fa8c16',
+    key2: 'load5',
+    stroke2: '#f5222d',
+    name1: '1m',
+    name2: '5m',
+    key3: 'load15',
+    stroke3: '#a0d911',
+    name3: '15m',
+  },
 ];

 function unitFormatter(unit: string, activeKey: string): (v: number) => string {
@@ -78,9 +186,10 @@ function unitFormatter(unit: string, activeKey: string): (v: number) => string {
 function formatFullTimestamp(unixSec: number): string {
  const d = new Date(unixSec * 1000);
  const today = new Date();
-  const sameDay = d.getFullYear() === today.getFullYear()
-    && d.getMonth() === today.getMonth()
-    && d.getDate() === today.getDate();
+  const sameDay =
+    d.getFullYear() === today.getFullYear() &&
+    d.getMonth() === today.getMonth() &&
+    d.getDate() === today.getDate();
  const hh = String(d.getHours()).padStart(2, '0');
  const mm = String(d.getMinutes()).padStart(2, '0');
  const ss = String(d.getSeconds()).padStart(2, '0');
@@ -142,7 +251,12 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
          const hh = String(d.getHours()).padStart(2, '0');
          const mm = String(d.getMinutes()).padStart(2, '0');
          const ss = String(d.getSeconds()).padStart(2, '0');
-          const lab = bucket >= 2880 ? `${MM}-${DD} ${hh}:${mm}` : bucket >= 60 ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`;
+          const lab =
+            bucket >= 2880
+              ? `${MM}-${DD} ${hh}:${mm}`
+              : bucket >= 60
+                ? `${hh}:${mm}`
+                : `${hh}:${mm}:${ss}`;
          labs.push(lab);
          vals.push(Number(p.v) || 0);
          tss.push(Number(p.t) || 0);
@@ -232,7 +346,13 @@ export default function SystemHistoryModal({ open, status, onClose }: SystemHist
          const tabLabel = m.tabKey ? t(m.tabKey) : m.tab;
          return {
            key: m.key,
-            label: isMobile ? <span title={tabLabel} aria-label={tabLabel}>{m.icon}</span> : tabLabel,
+            label: isMobile ? (
+              <span title={tabLabel} aria-label={tabLabel}>
+                {m.icon}
+              </span>
+            ) : (
+              tabLabel
+            ),
          };
        })}
      />
@@ -32,7 +32,9 @@ export default function SystemStrip({ status, showIp, onToggleIp }: SystemStripP
          <div className="ov-strip-split">
            <div>
              <div className="ov-strip-sub">Xray</div>
-              <div className="ov-strip-value">{TimeFormatter.formatSecond(status.appStats.uptime)}</div>
+              <div className="ov-strip-value">
+                {TimeFormatter.formatSecond(status.appStats.uptime)}
+              </div>
            </div>
            <span className="ov-strip-split-sep" />
            <div>
@@ -16,7 +16,13 @@ interface ThroughputCardProps {
  isMobile: boolean;
 }

-export default function ThroughputCard({ status, up, down, labels, isMobile }: ThroughputCardProps) {
+export default function ThroughputCard({
+  status,
+  up,
+  down,
+  labels,
+  isMobile,
+}: ThroughputCardProps) {
  const { t } = useTranslation();
  const { token } = theme.useToken();
  const accent = token.colorPrimary;
@@ -96,12 +96,7 @@ export default function VersionModal({ open, status, onClose, onBusy }: VersionM
  const activeKeyStr = Array.isArray(activeKey) ? activeKey[0] : activeKey;

  return (
-    <Modal
-      open={open}
-      title={t('pages.index.xrayUpdates')}
-      footer={null}
-      onCancel={onClose}
-    >
+    <Modal open={open} title={t('pages.index.xrayUpdates')} footer={null} onCancel={onClose}>
      {modalContextHolder}
      <Spin spinning={loading}>
        <Collapse
@@ -168,11 +163,7 @@ export default function VersionModal({ open, status, onClose, onBusy }: VersionM
              key: '3',
              label: t('pages.index.geodataTitle'),
              children: (
-                <GeodataSection
-                  active={activeKeyStr === '3'}
-                  onBusy={onBusy}
-                  onClose={onClose}
-                />
+                <GeodataSection active={activeKeyStr === '3'} onBusy={onBusy} onClose={onClose} />
              ),
            },
          ]}
@@ -116,7 +116,7 @@ body.dark .log-container {
  --log-divider: rgba(255, 255, 255, 0.1);
 }

-html[data-theme="ultra-dark"] .log-container {
+html[data-theme='ultra-dark'] .log-container {
  --log-blocked: #ff8a8a;
  --log-proxy: #7fb6f1;
  --log-divider: rgba(255, 255, 255, 0.12);
@@ -122,17 +122,19 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
      FileManager.downloadTextFile('', 'x-ui.log');
      return;
    }
-    const lines = logs.map((l) => {
-      try {
-        const dt = l.DateTime ? new Date(l.DateTime) : null;
-        const dateStr = dt && !isNaN(dt.getTime()) ? dt.toISOString() : '';
-        const eventText = eventToken(l.Event);
-        const emailPart = l.Email ? ` Email=${l.Email}` : '';
-        return `${dateStr} FROM=${l.FromAddress || ''} TO=${l.ToAddress || ''} INBOUND=${l.Inbound || ''} OUTBOUND=${l.Outbound || ''}${emailPart} EVENT=${eventText}`.trim();
-      } catch {
-        return JSON.stringify(l);
-      }
-    }).join('\n');
+    const lines = logs
+      .map((l) => {
+        try {
+          const dt = l.DateTime ? new Date(l.DateTime) : null;
+          const dateStr = dt && !isNaN(dt.getTime()) ? dt.toISOString() : '';
+          const eventText = eventToken(l.Event);
+          const emailPart = l.Email ? ` Email=${l.Email}` : '';
+          return `${dateStr} FROM=${l.FromAddress || ''} TO=${l.ToAddress || ''} INBOUND=${l.Inbound || ''} OUTBOUND=${l.Outbound || ''}${emailPart} EVENT=${eventText}`.trim();
+        } catch {
+          return JSON.stringify(l);
+        }
+      })
+      .join('\n');
    FileManager.downloadTextFile(lines, 'x-ui.log');
  }

@@ -147,7 +149,15 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
      title={
        <>
          {t('pages.index.accessLogs')}
-          <SyncOutlined spin={loading} className="reload-icon" role="button" tabIndex={0} aria-label={t('refresh')} onClick={refresh} onKeyDown={activateOnKey(refresh)} />
+          <SyncOutlined
+            spin={loading}
+            className="reload-icon"
+            role="button"
+            tabIndex={0}
+            aria-label={t('refresh')}
+            onClick={refresh}
+            onKeyDown={activateOnKey(refresh)}
+          />
        </>
      }
    >
@@ -192,7 +202,12 @@ export default function XrayLogModal({ open, onClose }: XrayLogModalProps) {
          </Checkbox>
        </Form.Item>
        <Form.Item className="download-item">
-          <Button type="primary" onClick={download} icon={<DownloadOutlined />} aria-label={t('download')} />
+          <Button
+            type="primary"
+            onClick={download}
+            icon={<DownloadOutlined />}
+            aria-label={t('download')}
+          />
        </Form.Item>
      </Form>

@@ -55,11 +55,17 @@
 }

@keyframes obs-dot-pulse {
-  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 22%, transparent); }
-  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ant-color-success) 6%, transparent); }
+  0%,
+  100% {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-color-success) 22%, transparent);
+  }
+  50% {
+    box-shadow: 0 0 0 6px color-mix(in srgb, var(--ant-color-success) 6%, transparent);
+  }
 }

@media (prefers-reduced-motion: reduce) {
-  .obs-dot.is-alive { animation: none; }
+  .obs-dot.is-alive {
+    animation: none;
+  }
 }
-
@@ -48,12 +48,60 @@ interface ObservatoryTag {
 }

 const METRICS: MetricDef[] = [
-  { key: 'xrAlloc', tab: 'Heap', tabKey: 'pages.index.xrayTabHeap', title: 'pages.index.xrayTitleHeap', icon: <DatabaseOutlined />, unit: 'B', stroke: '#7c4dff' },
-  { key: 'xrSys', tab: 'Sys', tabKey: 'pages.index.xrayTabSys', title: 'pages.index.xrayTitleSys', icon: <CloudServerOutlined />, unit: 'B', stroke: '#1890ff' },
-  { key: 'xrHeapObjects', tab: 'Objects', tabKey: 'pages.index.xrayTabObjects', title: 'pages.index.xrayTitleObjects', icon: <BlockOutlined />, unit: '', stroke: '#13c2c2' },
-  { key: 'xrNumGC', tab: 'GC Count', tabKey: 'pages.index.xrayTabGcCount', title: 'pages.index.xrayTitleGcCount', icon: <DeleteOutlined />, unit: '', stroke: '#fa8c16' },
-  { key: 'xrPauseNs', tab: 'GC Pause', tabKey: 'pages.index.xrayTabGcPause', title: 'pages.index.xrayTitleGcPause', icon: <PauseCircleOutlined />, unit: 'ns', stroke: '#f5222d' },
-  { key: OBS_KEY, tab: 'Observatory', tabKey: 'pages.index.xrayTabObservatory', title: 'pages.index.xrayTitleObservatory', icon: <EyeOutlined />, unit: 'ms', stroke: '#52c41a' },
+  {
+    key: 'xrAlloc',
+    tab: 'Heap',
+    tabKey: 'pages.index.xrayTabHeap',
+    title: 'pages.index.xrayTitleHeap',
+    icon: <DatabaseOutlined />,
+    unit: 'B',
+    stroke: '#7c4dff',
+  },
+  {
+    key: 'xrSys',
+    tab: 'Sys',
+    tabKey: 'pages.index.xrayTabSys',
+    title: 'pages.index.xrayTitleSys',
+    icon: <CloudServerOutlined />,
+    unit: 'B',
+    stroke: '#1890ff',
+  },
+  {
+    key: 'xrHeapObjects',
+    tab: 'Objects',
+    tabKey: 'pages.index.xrayTabObjects',
+    title: 'pages.index.xrayTitleObjects',
+    icon: <BlockOutlined />,
+    unit: '',
+    stroke: '#13c2c2',
+  },
+  {
+    key: 'xrNumGC',
+    tab: 'GC Count',
+    tabKey: 'pages.index.xrayTabGcCount',
+    title: 'pages.index.xrayTitleGcCount',
+    icon: <DeleteOutlined />,
+    unit: '',
+    stroke: '#fa8c16',
+  },
+  {
+    key: 'xrPauseNs',
+    tab: 'GC Pause',
+    tabKey: 'pages.index.xrayTabGcPause',
+    title: 'pages.index.xrayTitleGcPause',
+    icon: <PauseCircleOutlined />,
+    unit: 'ns',
+    stroke: '#f5222d',
+  },
+  {
+    key: OBS_KEY,
+    tab: 'Observatory',
+    tabKey: 'pages.index.xrayTabObservatory',
+    title: 'pages.index.xrayTitleObservatory',
+    icon: <EyeOutlined />,
+    unit: 'ms',
+    stroke: '#52c41a',
+  },
 ];

 function unitFormatter(unit: string): (v: number) => string {
@@ -85,9 +133,10 @@ function fmtTimestamp(unixSec: number): string {
 function formatFullTimestamp(unixSec: number): string {
  const d = new Date(unixSec * 1000);
  const today = new Date();
-  const sameDay = d.getFullYear() === today.getFullYear()
-    && d.getMonth() === today.getMonth()
-    && d.getDate() === today.getDate();
+  const sameDay =
+    d.getFullYear() === today.getFullYear() &&
+    d.getMonth() === today.getMonth() &&
+    d.getDate() === today.getDate();
  const hh = String(d.getHours()).padStart(2, '0');
  const mm = String(d.getMinutes()).padStart(2, '0');
  const ss = String(d.getSeconds()).padStart(2, '0');
@@ -135,29 +184,32 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
    [tsLookup],
  );

-  const applyHistory = useCallback((msg: Msg<{ t: number; v: number }[]> | null | undefined, currentBucket: number) => {
-    if (msg?.success && Array.isArray(msg.obj)) {
-      const vals: number[] = [];
-      const labs: string[] = [];
-      const tss: number[] = [];
-      for (const p of msg.obj) {
-        const d = new Date(p.t * 1000);
-        const hh = String(d.getHours()).padStart(2, '0');
-        const mm = String(d.getMinutes()).padStart(2, '0');
-        const ss = String(d.getSeconds()).padStart(2, '0');
-        labs.push(currentBucket >= 60 ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`);
-        vals.push(Number(p.v) || 0);
-        tss.push(Number(p.t) || 0);
+  const applyHistory = useCallback(
+    (msg: Msg<{ t: number; v: number }[]> | null | undefined, currentBucket: number) => {
+      if (msg?.success && Array.isArray(msg.obj)) {
+        const vals: number[] = [];
+        const labs: string[] = [];
+        const tss: number[] = [];
+        for (const p of msg.obj) {
+          const d = new Date(p.t * 1000);
+          const hh = String(d.getHours()).padStart(2, '0');
+          const mm = String(d.getMinutes()).padStart(2, '0');
+          const ss = String(d.getSeconds()).padStart(2, '0');
+          labs.push(currentBucket >= 60 ? `${hh}:${mm}` : `${hh}:${mm}:${ss}`);
+          vals.push(Number(p.v) || 0);
+          tss.push(Number(p.t) || 0);
+        }
+        setLabels(labs);
+        setPoints(vals);
+        setTimestamps(tss);
+      } else {
+        setLabels([]);
+        setPoints([]);
+        setTimestamps([]);
      }
-      setLabels(labs);
-      setPoints(vals);
-      setTimestamps(tss);
-    } else {
-      setLabels([]);
-      setPoints([]);
-      setTimestamps([]);
-    }
-  }, []);
+    },
+    [],
+  );

  const fetchState = useCallback(async () => {
    try {
@@ -255,7 +307,15 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
    return () => {
      stopObsPolling();
    };
-  }, [open, activeKey, isObservatory, fetchObservatory, fetchObsBucket, fetchMetricBucket, stopObsPolling]);
+  }, [
+    open,
+    activeKey,
+    isObservatory,
+    fetchObservatory,
+    fetchObsBucket,
+    fetchMetricBucket,
+    stopObsPolling,
+  ]);

  useEffect(() => {
    if (!open) return;
@@ -314,7 +374,13 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
          const tabLabel = m.tabKey ? t(m.tabKey) : m.tab;
          return {
            key: m.key,
-            label: isMobile ? <span title={tabLabel} aria-label={tabLabel}>{m.icon}</span> : tabLabel,
+            label: isMobile ? (
+              <span title={tabLabel} aria-label={tabLabel}>
+                {m.icon}
+              </span>
+            ) : (
+              tabLabel
+            ),
          };
        })}
      />
@@ -357,10 +423,12 @@ export default function XrayMetricsModal({ open, onClose }: XrayMetricsModalProp
                  </Tag>
                  <Tag color="blue">{activeObsTag.delay} ms</Tag>
                  <span className="obs-stamp">
-                    {t('pages.index.xrayObservatoryLastSeen')}: {fmtTimestamp(activeObsTag.lastSeenTime)}
+                    {t('pages.index.xrayObservatoryLastSeen')}:{' '}
+                    {fmtTimestamp(activeObsTag.lastSeenTime)}
                  </span>
                  <span className="obs-stamp">
-                    {t('pages.index.xrayObservatoryLastTry')}: {fmtTimestamp(activeObsTag.lastTryTime)}
+                    {t('pages.index.xrayObservatoryLastTry')}:{' '}
+                    {fmtTimestamp(activeObsTag.lastTryTime)}
                  </span>
                </div>
              )}
@@ -6,7 +6,16 @@ import type { Status } from '@/models/status';
 const OVERVIEW_WINDOW = 72;
 const SEED_BUCKET_SECONDS = 2;

-const SERIES_KEYS = ['cpu', 'mem', 'swap', 'diskUsage', 'netUp', 'netDown', 'tcpCount', 'udpCount'] as const;
+const SERIES_KEYS = [
+  'cpu',
+  'mem',
+  'swap',
+  'diskUsage',
+  'netUp',
+  'netDown',
+  'tcpCount',
+  'udpCount',
+] as const;

 export type OverviewSeriesKey = (typeof SERIES_KEYS)[number];

@@ -26,7 +35,10 @@ interface HistoryWindow {
 }

 function emptySeries(): Record<OverviewSeriesKey, number[]> {
-  return Object.fromEntries(SERIES_KEYS.map((key) => [key, [] as number[]])) as Record<OverviewSeriesKey, number[]>;
+  return Object.fromEntries(SERIES_KEYS.map((key) => [key, [] as number[]])) as Record<
+    OverviewSeriesKey,
+    number[]
+  >;
 }

 function emptyWindow(): HistoryWindow {