DockerEntrypoint.sh

@@ -22,7 +22,7 @@ EOF
 
     cat > /etc/fail2ban/filter.d/3x-ipl.conf << 'EOF'
 [Definition]
-datepattern = ^%Y/%m/%d %H:%M:%S
+datepattern = ^%%Y/%%m/%%d %%H:%%M:%%S
 failregex   = \[LIMIT_IP\]\s*Email\s*=\s*<F-USER>.+</F-USER>\s*\|\|\s*Disconnecting OLD IP\s*=\s*<ADDR>\s*\|\|\s*Timestamp\s*=\s*\d+
 ignoreregex =
 EOF

frontend/src/components/Sparkline.vue

@@ -17,7 +17,7 @@ const props = defineProps({
   showAxes: { type: Boolean, default: false },
   yTickStep: { type: Number, default: 25 },
   tickCountX: { type: Number, default: 4 },
-  paddingLeft: { type: Number, default: 32 },
+  paddingLeft: { type: Number, default: 56 },
   paddingRight: { type: Number, default: 6 },
   paddingTop: { type: Number, default: 6 },
   paddingBottom: { type: Number, default: 20 },

frontend/src/models/dbinbound.js

@@ -70,6 +70,10 @@ export class DBInbound {
         return this.protocol === Protocols.WIREGUARD;
     }
 
+    get isHysteria() {
+        return this.protocol === Protocols.HYSTERIA;
+    }
+
     get address() {
         let address = location.hostname;
         if (!ObjectUtil.isEmpty(this.listen) && this.listen !== "0.0.0.0") {

frontend/src/models/inbound.js

@@ -687,8 +687,9 @@ export class HysteriaMasquerade extends XrayCommonClass {
     }
 
     static fromJson(json = {}) {
+        const type = ['proxy', 'file', 'string'].includes(json.type) ? json.type : 'proxy';
         return new HysteriaMasquerade(
-            json.type,
+            type,
             json.dir,
             json.url,
             json.rewriteHost,

frontend/src/pages/api-docs/ApiDocsPage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Modal, message } from 'ant-design-vue';
 import {
@@ -8,13 +8,17 @@ import {
   CopyOutlined,
   EyeOutlined,
   EyeInvisibleOutlined,
+  SearchOutlined,
+  ExpandOutlined,
+  CompressOutlined,
 } from '@ant-design/icons-vue';
 
 import { theme as themeState, antdThemeConfig } from '@/composables/useTheme.js';
 import AppSidebar from '@/components/AppSidebar.vue';
 import { HttpUtil, ClipboardManager } from '@/utils/index.js';
-import { sections } from './endpoints.js';
+import { sections as allSections } from './endpoints.js';
 import EndpointSection from './EndpointSection.vue';
+import CodeBlock from './CodeBlock.vue';
 
 const { t } = useI18n();
 
@@ -26,11 +30,55 @@ const tokenLoading = ref(false);
 const tokenRotating = ref(false);
 const tokenVisible = ref(false);
 
+const searchQuery = ref('');
+const collapsedSections = ref(new Set());
+
 const curlExample = `curl -X GET \\
   -H "Authorization: Bearer YOUR_API_TOKEN" \\
   -H "Accept: application/json" \\
   https://your-panel.example.com/panel/api/inbounds/list`;
 
+const sections = computed(() => {
+  const q = searchQuery.value.toLowerCase().trim();
+  if (!q) return allSections;
+  return allSections
+    .map(s => {
+      const matching = s.endpoints.filter(e =>
+        e.path.toLowerCase().includes(q) ||
+        e.summary?.toLowerCase().includes(q) ||
+        e.method.toLowerCase().includes(q)
+      );
+      return { ...s, endpoints: matching };
+    })
+    .filter(s => s.endpoints.length > 0);
+});
+
+const endpointCount = computed(() =>
+  allSections.reduce((sum, s) => sum + s.endpoints.length, 0)
+);
+
+const visibleSections = computed(() =>
+  sections.value.reduce((sum, s) => sum + s.endpoints.length, 0)
+);
+
+function isCollapsed(id) {
+  return collapsedSections.value.has(id);
+}
+
+function toggleSection(id) {
+  const s = new Set(collapsedSections.value);
+  if (s.has(id)) s.delete(id); else s.add(id);
+  collapsedSections.value = s;
+}
+
+function expandAll() {
+  collapsedSections.value = new Set();
+}
+
+function collapseAll() {
+  collapsedSections.value = new Set(allSections.map(s => s.id));
+}
+
 async function loadApiToken() {
   tokenLoading.value = true;
   try {
@@ -93,6 +141,7 @@ onMounted(() => {
                 cookie, or with the <code>Authorization: Bearer &lt;token&gt;</code> header below. Every endpoint
                 returns a uniform <code>{ success, msg, obj }</code> envelope unless otherwise noted.
               </p>
+
             </header>
 
             <a-card class="token-card" size="small">
@@ -135,18 +184,48 @@ onMounted(() => {
             </a-card>
 
             <a-card class="curl-card" size="small" title="Quick example">
-              <pre class="code-block">{{ curlExample }}</pre>
+              <CodeBlock :code="curlExample" lang="text" />
             </a-card>
 
+            <div class="toolbar">
+              <a-input-search
+                v-model:value="searchQuery"
+                placeholder="Search endpoints by path, method, or description…"
+                allow-clear
+                class="search-bar"
+              >
+                <template #prefix><SearchOutlined /></template>
+              </a-input-search>
+              <span class="match-count" v-if="searchQuery">
+                {{ visibleSections }} / {{ endpointCount }} endpoints
+              </span>
+              <a-space size="small">
+                <a-button size="small" @click="expandAll">
+                  <template #icon><ExpandOutlined /></template>
+                  Expand all
+                </a-button>
+                <a-button size="small" @click="collapseAll">
+                  <template #icon><CompressOutlined /></template>
+                  Collapse all
+                </a-button>
+              </a-space>
+            </div>
+
             <nav class="toc-nav">
               <span class="toc-label">On this page:</span>
               <a v-for="s in sections" :key="s.id" class="toc-link" :href="`#${s.id}`"
                 @click.prevent="scrollToSection(s.id)">
-                {{ s.title }}
+                {{ s.title }} ({{ s.endpoints.length }})
               </a>
             </nav>
 
-            <EndpointSection v-for="s in sections" :key="s.id" :section="s" />
+            <EndpointSection
+              v-for="s in sections"
+              :key="s.id"
+              :section="s"
+              :collapsed="isCollapsed(s.id)"
+              @toggle="toggleSection(s.id)"
+            />
           </div>
         </a-layout-content>
       </a-layout>
@@ -275,6 +354,26 @@ onMounted(() => {
   overflow-x: auto;
 }
 
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-bottom: 16px;
+}
+
+.search-bar {
+  flex: 1;
+  min-width: 200px;
+  max-width: 480px;
+}
+
+.match-count {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.5);
+  white-space: nowrap;
+}
+
 .toc-nav {
   display: flex;
   flex-wrap: wrap;

frontend/src/pages/api-docs/CodeBlock.vue

@@ -0,0 +1,152 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { message } from 'ant-design-vue';
+import { CopyOutlined, CheckOutlined } from '@ant-design/icons-vue';
+
+const props = defineProps({
+  code: { type: String, default: '' },
+  lang: { type: String, default: 'json' },
+});
+
+const copied = ref(false);
+
+function escapeHtml(str) {
+  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function highlightJson(str) {
+  const escaped = escapeHtml(str);
+  return escaped.replace(
+    /("(?:[^"\\]|\\.)*")\s*(:)|("(?:[^"\\]|\\.)*")|(-?\d+\.?\d*(?:[eE][+-]?\d+)?)\b|(true|false)|(null)|([{}\[\]])/g,
+    (_m, key, colon, string, number, bool, nil) => {
+      if (colon) return `<span class="json-key">${key}</span>${colon}`;
+      if (string) return `<span class="json-string">${string}</span>`;
+      if (number) return `<span class="json-number">${number}</span>`;
+      if (bool) return `<span class="json-boolean">${bool}</span>`;
+      if (nil) return `<span class="json-null">${nil}</span>`;
+      return _m;
+    }
+  );
+}
+
+const highlighted = computed(() => {
+  if (props.lang === 'json') {
+    return highlightJson(props.code);
+  }
+  return escapeHtml(props.code);
+});
+
+async function copyCode() {
+  try {
+    await navigator.clipboard.writeText(props.code);
+    copied.value = true;
+    message.success('Copied');
+    setTimeout(() => { copied.value = false; }, 2000);
+  } catch {
+    message.error('Copy failed');
+  }
+}
+</script>
+
+<template>
+  <div class="code-block-wrapper">
+    <button class="copy-btn" :class="{ copied }" @click="copyCode" :title="copied ? 'Copied' : 'Copy'">
+      <CheckOutlined v-if="copied" />
+      <CopyOutlined v-else />
+    </button>
+    <pre class="code-block" :class="`lang-${lang}`"><code v-html="highlighted"></code></pre>
+  </div>
+</template>
+
+<style scoped>
+.code-block-wrapper {
+  position: relative;
+  border-radius: 6px;
+  overflow: hidden;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgba(128, 128, 128, 0.2);
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.85);
+  color: rgba(0, 0, 0, 0.5);
+  cursor: pointer;
+  font-size: 13px;
+  opacity: 0;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
+}
+
+.code-block-wrapper:hover .copy-btn {
+  opacity: 1;
+}
+
+.copy-btn:hover {
+  background: #fff;
+  color: #1677ff;
+  border-color: #1677ff;
+}
+
+.copy-btn.copied {
+  opacity: 1;
+  background: #52c41a;
+  color: #fff;
+  border-color: #52c41a;
+}
+
+.code-block {
+  background: rgba(128, 128, 128, 0.08);
+  border: 1px solid rgba(128, 128, 128, 0.15);
+  border-radius: 6px;
+  padding: 12px;
+  margin: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12.5px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+  overflow-x: auto;
+}
+
+
+</style>
+
+<style>
+.json-key { color: #0550ae; }
+.json-string { color: #116329; }
+.json-number { color: #9a6700; }
+.json-boolean { color: #cf222e; }
+.json-null { color: #8250df; }
+
+body.dark .code-block {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.88);
+}
+
+body.dark .json-key { color: #79c0ff; }
+body.dark .json-string { color: #7ee787; }
+body.dark .json-number { color: #d29922; }
+body.dark .json-boolean { color: #ff7b72; }
+body.dark .json-null { color: #d2a8ff; }
+
+body.dark .copy-btn {
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.5);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+body.dark .copy-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #58a6ff;
+  border-color: #58a6ff;
+}
+</style>

frontend/src/pages/api-docs/EndpointRow.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from 'vue';
-import { methodColors } from './endpoints.js';
+import { methodColors, safeInlineHtml } from './endpoints.js';
+import CodeBlock from './CodeBlock.vue';
 
 const props = defineProps({
   endpoint: { type: Object, required: true },
@@ -24,7 +25,7 @@ const paramColumns = [
       <code class="endpoint-path">{{ endpoint.path }}</code>
     </div>
 
-    <p v-if="endpoint.summary" class="endpoint-summary">{{ endpoint.summary }}</p>
+    <p v-if="endpoint.summary" class="endpoint-summary" v-html="safeInlineHtml(endpoint.summary)"></p>
 
     <div v-if="hasParams" class="endpoint-block">
       <div class="block-label">Parameters</div>
@@ -33,16 +34,17 @@ const paramColumns = [
 
     <div v-if="endpoint.body" class="endpoint-block">
       <div class="block-label">Request body</div>
-      <a-typography-paragraph :copyable="{ text: endpoint.body }">
-        <pre class="code-block">{{ endpoint.body }}</pre>
-      </a-typography-paragraph>
+      <CodeBlock :code="endpoint.body" lang="json" />
     </div>
 
     <div v-if="endpoint.response" class="endpoint-block">
       <div class="block-label">Response</div>
-      <a-typography-paragraph :copyable="{ text: endpoint.response }">
-        <pre class="code-block">{{ endpoint.response }}</pre>
-      </a-typography-paragraph>
+      <CodeBlock :code="endpoint.response" lang="json" />
+    </div>
+
+    <div v-if="endpoint.errorResponse" class="endpoint-block">
+      <div class="block-label error-label">Error response</div>
+      <CodeBlock :code="endpoint.errorResponse" lang="json" />
     </div>
   </div>
 </template>
@@ -96,6 +98,10 @@ const paramColumns = [
   margin-bottom: 6px;
 }
 
+.error-label {
+  color: #cf222e;
+}
+
 .code-block {
   background: rgba(128, 128, 128, 0.08);
   border: 1px solid rgba(128, 128, 128, 0.15);
@@ -120,6 +126,10 @@ body.dark .block-label {
   color: rgba(255, 255, 255, 0.55);
 }
 
+body.dark .error-label {
+  color: #ff7b72;
+}
+
 body.dark .code-block {
   background: rgba(255, 255, 255, 0.04);
   border-color: rgba(255, 255, 255, 0.1);

frontend/src/pages/api-docs/EndpointSection.vue

@@ -1,16 +1,55 @@
 <script setup>
+import { computed } from 'vue';
+import {
+  DownOutlined,
+  RightOutlined,
+} from '@ant-design/icons-vue';
 import EndpointRow from './EndpointRow.vue';
+import { safeInlineHtml } from './endpoints.js';
 
-defineProps({
+const props = defineProps({
   section: { type: Object, required: true },
+  collapsed: { type: Boolean, default: false },
 });
+
+const emit = defineEmits(['toggle']);
+
+const endpointLabel = computed(() =>
+  props.section.endpoints.length === 1
+    ? '1 endpoint'
+    : `${props.section.endpoints.length} endpoints`
+);
 </script>
 
 <template>
   <section :id="section.id" class="api-section">
-    <h2 class="section-title">{{ section.title }}</h2>
-    <p v-if="section.description" class="section-description">{{ section.description }}</p>
-    <div class="endpoints">
+    <div class="section-header" @click="emit('toggle')">
+      <div class="section-header-left">
+        <DownOutlined v-if="!collapsed" class="collapse-icon" />
+        <RightOutlined v-else class="collapse-icon" />
+        <h2 class="section-title">{{ section.title }}</h2>
+      </div>
+      <span class="endpoint-count">{{ endpointLabel }}</span>
+    </div>
+    <p v-if="section.description && !collapsed" class="section-description" v-html="safeInlineHtml(section.description)"></p>
+
+    <div v-if="section.subHeader && !collapsed" class="sub-header-block">
+      <div class="block-label">Response headers</div>
+      <a-table
+        :columns="[{ title: 'Header', dataIndex: 'name', key: 'name', width: 240 }, { title: 'Description', dataIndex: 'desc', key: 'desc' }]"
+        :data-source="section.subHeader"
+        :pagination="false"
+        size="small"
+        row-key="name"
+      >
+        <template #bodyCell="{ column, text }">
+          <span v-if="column.dataIndex === 'desc'" v-html="safeInlineHtml(text)"></span>
+          <template v-else>{{ text }}</template>
+        </template>
+      </a-table>
+    </div>
+
+    <div v-show="!collapsed" class="endpoints">
       <EndpointRow v-for="(endpoint, idx) in section.endpoints" :key="idx" :endpoint="endpoint" />
     </div>
   </section>
@@ -21,11 +60,35 @@ defineProps({
   background: #fff;
   border: 1px solid rgba(128, 128, 128, 0.15);
   border-radius: 8px;
-  padding: 20px 24px;
-  margin-bottom: 20px;
+  padding: 16px 24px;
+  margin-bottom: 16px;
   scroll-margin-top: 16px;
 }
 
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  user-select: none;
+}
+
+.section-header:hover .collapse-icon {
+  color: #1677ff;
+}
+
+.section-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.collapse-icon {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  transition: color 0.2s;
+}
+
 .section-title {
   font-size: 20px;
   font-weight: 600;
@@ -33,12 +96,36 @@ defineProps({
   color: rgba(0, 0, 0, 0.88);
 }
 
+.endpoint-count {
+  font-size: 12px;
+  color: rgba(0, 0, 0, 0.45);
+  white-space: nowrap;
+}
+
 .section-description {
-  margin: 6px 0 14px;
+  margin: 10px 0 14px;
   color: rgba(0, 0, 0, 0.65);
   line-height: 1.55;
 }
 
+.sub-header-block {
+  margin-bottom: 14px;
+}
+
+.block-label {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: rgba(0, 0, 0, 0.5);
+  margin-bottom: 6px;
+}
+
+.endpoints {
+  padding-top: 8px;
+  border-top: 1px solid rgba(128, 128, 128, 0.1);
+}
+
 .endpoints > :first-child {
   padding-top: 0;
 }
@@ -62,4 +149,8 @@ body.dark .section-title {
 body.dark .section-description {
   color: rgba(255, 255, 255, 0.7);
 }
+
+body.dark .block-label {
+  color: rgba(255, 255, 255, 0.55);
+}
 </style>

frontend/src/pages/api-docs/endpoints.js

@@ -1,3 +1,28 @@
+export function safeInlineHtml(input) {
+  if (!input) return '';
+  const escape = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  const open = '<code>';
+  const close = '</code>';
+  let out = '';
+  let i = 0;
+  while (i < input.length) {
+    const oIdx = input.indexOf(open, i);
+    if (oIdx === -1) {
+      out += escape(input.slice(i));
+      break;
+    }
+    out += escape(input.slice(i, oIdx));
+    const cIdx = input.indexOf(close, oIdx + open.length);
+    if (cIdx === -1) {
+      out += escape(input.slice(oIdx));
+      break;
+    }
+    out += '<code>' + escape(input.slice(oIdx + open.length, cIdx)) + '</code>';
+    i = cIdx + close.length;
+  }
+  return out;
+}
+
 export const sections = [
   {
     id: 'auth',
@@ -17,6 +42,8 @@ export const sections = [
         body: '{\n  "username": "admin",\n  "password": "admin",\n  "twoFactorCode": "123456"\n}',
         response:
           '{\n  "success": true,\n  "msg": "Logged in successfully"\n}',
+        errorResponse:
+          '{\n  "success": false,\n  "msg": "Wrong username or password"\n}',
       },
       {
         method: 'GET',
@@ -67,6 +94,7 @@ export const sections = [
         params: [
           { name: 'email', in: 'path', type: 'string', desc: 'Client email (unique across the panel).' },
         ],
+        response: '{\n  "success": true,\n  "obj": {\n    "email": "user1",\n    "up": 1048576,\n    "down": 2097152,\n    "total": 10737418240,\n    "expiryTime": 1735689600000\n  }\n}',
       },
       {
         method: 'GET',
@@ -75,6 +103,7 @@ export const sections = [
         params: [
           { name: 'id', in: 'path', type: 'string', desc: 'Client subId / UUID.' },
         ],
+        response: '{\n  "success": true,\n  "obj": {\n    "email": "user1",\n    "up": 1048576,\n    "down": 2097152,\n    "total": 10737418240,\n    "expiryTime": 1735689600000\n  }\n}',
       },
       {
         method: 'POST',
@@ -82,6 +111,8 @@ export const sections = [
         summary: 'Create a new inbound. Send the full inbound payload (protocol, port, settings JSON, streamSettings JSON, sniffing JSON, remark, expiryTime, total, enable).',
         body:
           '{\n  "enable": true,\n  "remark": "VLESS-443",\n  "listen": "",\n  "port": 443,\n  "protocol": "vless",\n  "expiryTime": 0,\n  "total": 0,\n  "settings": "{\\"clients\\":[{\\"id\\":\\"...\\",\\"email\\":\\"user1\\"}],\\"decryption\\":\\"none\\",\\"fallbacks\\":[]}",\n  "streamSettings": "{\\"network\\":\\"tcp\\",\\"security\\":\\"reality\\",\\"realitySettings\\":{...}}",\n  "sniffing": "{\\"enabled\\":true,\\"destOverride\\":[\\"http\\",\\"tls\\"]}"\n}',
+        errorResponse:
+          '{\n  "success": false,\n  "msg": "Port 443 is already in use"\n}',
       },
       {
         method: 'POST',
@@ -209,6 +240,7 @@ export const sections = [
         method: 'POST',
         path: '/panel/api/inbounds/lastOnline',
         summary: 'Map of client email → last-seen unix timestamp.',
+        response: '{\n  "success": true,\n  "obj": [\n    { "email": "user1", "lastOnline": 1700000000 },\n    { "email": "user2", "lastOnline": 1699999000 }\n  ]\n}',
       },
       {
         method: 'GET',
@@ -264,6 +296,7 @@ export const sections = [
         method: 'GET',
         path: '/panel/api/server/status',
         summary: 'Real-time machine snapshot: CPU, memory, swap, disk, network IO, load averages, open connections, Xray state. Cached and refreshed every 2 seconds in the background.',
+        response: '{\n  "success": true,\n  "obj": {\n    "cpu": 12.5,\n    "mem": { "current": 2147483648, "total": 8589934592 },\n    "swap": { "current": 0, "total": 4294967296 },\n    "disk": { "current": 53687091200, "total": 268435456000 },\n    "netIO": { "up": 1073741824, "down": 2147483648 },\n    "xray": { "state": "running", "version": "v25.10.31" },\n    "tcpCount": 42,\n    "load": { "load1": 0.5, "load5": 0.3, "load15": 0.2 }\n  }\n}',
       },
       {
         method: 'GET',
@@ -278,7 +311,36 @@ export const sections = [
         path: '/panel/api/server/history/:metric/:bucket',
         summary: 'Aggregated time-series for one metric. Returns an array of {t, v} samples covering the last ~6 hours.',
         params: [
-          { name: 'metric', in: 'path', type: 'string', desc: 'cpu | mem | swap | netIn | netOut | tcpCount | udpCount | load1 | online.' },
+          { name: 'metric', in: 'path', type: 'string', desc: 'cpu | mem | netUp | netDown | online | load1 | load5 | load15.' },
+          { name: 'bucket', in: 'path', type: 'number', desc: 'Bucket size in seconds. Allowed: 2, 30, 60, 120, 180, 300.' },
+        ],
+        response: '{\n  "success": true,\n  "obj": [\n    { "t": 1700000000, "v": 12.5 },\n    { "t": 1700000002, "v": 13.1 }\n  ]\n}',
+      },
+      {
+        method: 'GET',
+        path: '/panel/api/server/xrayMetricsState',
+        summary: 'Xray runtime metrics state — whether the xray config has a `metrics` block, which expvar keys are flowing, and the current snapshot values for each. Returns an empty state when metrics are not configured.',
+      },
+      {
+        method: 'GET',
+        path: '/panel/api/server/xrayMetricsHistory/:metric/:bucket',
+        summary: 'Time-series history for one Xray runtime metric over the last ~6 hours. Same {t, v} shape as /history/:metric/:bucket.',
+        params: [
+          { name: 'metric', in: 'path', type: 'string', desc: 'xrAlloc | xrSys | xrHeapObjects | xrNumGC | xrPauseNs.' },
+          { name: 'bucket', in: 'path', type: 'number', desc: 'Bucket size in seconds. Allowed: 2, 30, 60, 120, 180, 300.' },
+        ],
+      },
+      {
+        method: 'GET',
+        path: '/panel/api/server/xrayObservatory',
+        summary: 'Latest snapshot from the Xray observatory — per-outbound latency, health status, and last-probe time. Only populated when the Xray config has an observatory configured.',
+      },
+      {
+        method: 'GET',
+        path: '/panel/api/server/xrayObservatoryHistory/:tag/:bucket',
+        summary: 'Time-series of observatory probe results for one outbound tag. Same {t, v} shape as the other history endpoints.',
+        params: [
+          { name: 'tag', in: 'path', type: 'string', desc: 'Outbound tag from the observatory config.' },
           { name: 'bucket', in: 'path', type: 'number', desc: 'Bucket size in seconds. Allowed: 2, 30, 60, 120, 180, 300.' },
         ],
       },
@@ -286,6 +348,7 @@ export const sections = [
         method: 'GET',
         path: '/panel/api/server/getXrayVersion',
         summary: 'List Xray binary versions available for install on this host.',
+        response: '{\n  "success": true,\n  "obj": ["v25.10.31", "v25.9.15", "v25.8.1"]\n}',
       },
       {
         method: 'GET',
@@ -295,7 +358,8 @@ export const sections = [
       {
         method: 'GET',
         path: '/panel/api/server/getConfigJson',
-        summary: 'Return the assembled Xray config that’s currently running on this host.',
+        summary: 'Return the assembled Xray config that\u2019s currently running on this host.',
+        response: '{\n  "success": true,\n  "obj": {\n    "log": { "loglevel": "warning" },\n    "inbounds": [...],\n    "outbounds": [...],\n    "routing": { "rules": [...] }\n  }\n}',
       },
       {
         method: 'GET',
@@ -306,36 +370,45 @@ export const sections = [
         method: 'GET',
         path: '/panel/api/server/getNewUUID',
         summary: 'Generate a fresh UUID v4. Convenience helper for client IDs.',
+        response: '{\n  "success": true,\n  "obj": "550e8400-e29b-41d4-a716-446655440000"\n}',
       },
       {
         method: 'GET',
         path: '/panel/api/server/getNewX25519Cert',
         summary: 'Generate a new X25519 keypair for Reality.',
+        response: '{\n  "success": true,\n  "obj": {\n    "privateKey": "uN9qLfV3zH8w...",\n    "publicKey": "5v8xPqR2sM7k..."\n  }\n}',
       },
       {
         method: 'GET',
         path: '/panel/api/server/getNewmldsa65',
         summary: 'Generate a new ML-DSA-65 keypair (post-quantum signature). Returns {privateKey, publicKey, seed}.',
+        response: '{\n  "success": true,\n  "obj": {\n    "privateKey": "mdsa65priv...",\n    "publicKey": "mdsa65pub...",\n    "seed": "random-seed..."\n  }\n}',
       },
       {
         method: 'GET',
         path: '/panel/api/server/getNewmlkem768',
         summary: 'Generate a new ML-KEM-768 keypair (post-quantum KEM). Returns {clientKey, serverKey}.',
+        response: '{\n  "success": true,\n  "obj": {\n    "clientKey": "mlkem768-client...",\n    "serverKey": "mlkem768-server..."\n  }\n}',
       },
       {
         method: 'GET',
         path: '/panel/api/server/getNewVlessEnc',
-        summary: 'Generate VLESS encryption auth options. Returns auths with id, label, decryption, and encryption.',
+        summary: 'Generate VLESS encryption auth options. Returns an auths array each with id, label, encryption, and decryption fields.',
+        response: '{\n  "success": true,\n  "obj": {\n    "auths": [\n      { "id": 0, "label": "Auth #0", "encryption": "aes-256-gcm", "decryption": "" }\n    ]\n  }\n}',
       },
       {
         method: 'POST',
         path: '/panel/api/server/stopXrayService',
         summary: 'Stop the Xray binary. All proxies go offline immediately.',
+        errorResponse:
+          '{\n  "success": false,\n  "msg": "Xray is not running"\n}',
       },
       {
         method: 'POST',
         path: '/panel/api/server/restartXrayService',
         summary: 'Reload Xray with the current config. Typically required after structural inbound or routing changes.',
+        errorResponse:
+          '{\n  "success": false,\n  "msg": "Xray config is invalid: ..."\n}',
       },
       {
         method: 'POST',
@@ -354,6 +427,10 @@ export const sections = [
         method: 'POST',
         path: '/panel/api/server/updateGeofile',
         summary: 'Refresh the default GeoIP / GeoSite data files. Body can include a fileName, or use the /:fileName variant.',
+        params: [
+          { name: 'fileName', in: 'body (form)', type: 'string', desc: 'Filename to update (e.g. geoip.dat, geosite.dat). Omit to update all defaults.' },
+        ],
+        body: 'fileName=geoip.dat',
       },
       {
         method: 'POST',
@@ -366,11 +443,12 @@ export const sections = [
       {
         method: 'POST',
         path: '/panel/api/server/logs/:count',
-        summary: 'Return the last N lines of the panel’s own log.',
+        summary: 'Return the last N lines of the panel\u2019s own log.',
         params: [
           { name: 'count', in: 'path', type: 'number', desc: 'Number of trailing log lines.' },
         ],
         body: '{\n  "level": "info",\n  "syslog": false\n}',
+        response: '{\n  "success": true,\n  "obj": "2025/01/01 12:00:00 [INFO] Server started\\n2025/01/01 12:00:01 [INFO] Xray is running"\n}',
       },
       {
         method: 'POST',
@@ -378,17 +456,31 @@ export const sections = [
         summary: 'Return the last N lines of the Xray process log.',
         params: [
           { name: 'count', in: 'path', type: 'number', desc: 'Number of trailing log lines.' },
+          { name: 'filter', in: 'body (form)', type: 'string', desc: 'Keyword filter — only lines containing this string.' },
+          { name: 'showDirect', in: 'body (form)', type: 'string', desc: '"true" to include direct (freedom) traffic lines.' },
+          { name: 'showBlocked', in: 'body (form)', type: 'string', desc: '"true" to include blocked (blackhole) traffic lines.' },
+          { name: 'showProxy', in: 'body (form)', type: 'string', desc: '"true" to include proxy traffic lines.' },
         ],
+        body: 'filter=error&showDirect=false&showBlocked=true&showProxy=true',
+        response: '{\n  "success": true,\n  "obj": "2025/01/01 12:00:00 rejected  vless  proxy  example.com  reason: no valid user\\n2025/01/01 12:00:01 direct  freedom  ok"\n}',
       },
       {
         method: 'POST',
         path: '/panel/api/server/importDB',
         summary: 'Restore the panel DB from an uploaded SQLite file (multipart form, field name "db"). The panel restarts after restore. Destructive.',
+        params: [
+          { name: 'db', in: 'body (multipart)', type: 'file', desc: 'SQLite database file to upload.' },
+        ],
       },
       {
         method: 'POST',
         path: '/panel/api/server/getNewEchCert',
-        summary: 'Generate a new ECH (Encrypted Client Hello) keypair. Body picks the algorithm.',
+        summary: 'Generate a new ECH (Encrypted Client Hello) keypair and config list for the given SNI.',
+        params: [
+          { name: 'sni', in: 'body (form)', type: 'string', desc: 'Server Name Indication to generate the ECH config for.' },
+        ],
+        body: 'sni=example.com',
+        response: '{\n  "success": true,\n  "obj": {\n    "echKeySet": "...",\n    "echServerKeys": [...],\n    "echConfigList": "..."\n  }\n}',
       },
     ],
   },
@@ -403,6 +495,7 @@ export const sections = [
         method: 'GET',
         path: '/panel/api/nodes/list',
         summary: 'List every configured node with its connection details, health, and last heartbeat patch.',
+        response: '{\n  "success": true,\n  "obj": [\n    {\n      "id": 1,\n      "name": "de-fra-1",\n      "scheme": "https",\n      "host": "node1.example.com",\n      "port": 2053,\n      "status": "online",\n      "cpu": 23.5,\n      "mem": 45.1\n    }\n  ]\n}',
       },
       {
         method: 'GET',
@@ -422,10 +515,11 @@ export const sections = [
       {
         method: 'POST',
         path: '/panel/api/nodes/update/:id',
-        summary: 'Replace a node’s connection details. Same body shape as /add.',
+        summary: 'Replace a node\u2019s connection details. Same body shape as /add.',
         params: [
           { name: 'id', in: 'path', type: 'number', desc: 'Node ID.' },
         ],
+        body: '{\n  "name": "de-fra-1",\n  "scheme": "https",\n  "host": "node1.example.com",\n  "port": 2053,\n  "basePath": "/",\n  "apiToken": "abcdef..."\n}',
       },
       {
         method: 'POST',
@@ -448,6 +542,8 @@ export const sections = [
         method: 'POST',
         path: '/panel/api/nodes/test',
         summary: 'Probe a node without saving it. Uses the body as connection details and returns whether the handshake succeeds.',
+        body: '{\n  "scheme": "https",\n  "host": "node1.example.com",\n  "port": 2053,\n  "basePath": "/",\n  "apiToken": "abcdef..."\n}',
+        response: '{\n  "success": true,\n  "obj": {\n    "status": "online",\n    "cpu": 12.5,\n    "mem": 45.2\n  }\n}',
       },
       {
         method: 'POST',
@@ -463,8 +559,8 @@ export const sections = [
         summary: 'Aggregated metric history for a node — same shape as /server/history, scoped to one node.',
         params: [
           { name: 'id', in: 'path', type: 'number', desc: 'Node ID.' },
-          { name: 'metric', in: 'path', type: 'string', desc: 'Metric key (cpu, mem, netIn, …).' },
-          { name: 'bucket', in: 'path', type: 'number', desc: 'Bucket size in seconds.' },
+          { name: 'metric', in: 'path', type: 'string', desc: 'cpu | mem.' },
+          { name: 'bucket', in: 'path', type: 'number', desc: 'Bucket size in seconds. Allowed: 2, 30, 60, 120, 180, 300.' },
         ],
       },
     ],
@@ -537,6 +633,228 @@ export const sections = [
       },
     ],
   },
+
+  {
+    id: 'settings',
+    title: 'Settings API',
+    description:
+      'Panel configuration, user credentials, and API token management. All endpoints live under /panel/setting and require a logged-in session or Bearer token.',
+    endpoints: [
+      {
+        method: 'POST',
+        path: '/panel/setting/all',
+        summary: 'Return every panel setting: web server, Telegram bot, subscription, security, LDAP. The full JSON blob that the Settings page edits.',
+        response: '{\n  "success": true,\n  "obj": {\n    "webPort": 2053,\n    "webCertFile": "",\n    "webKeyFile": "",\n    "webBasePath": "/",\n    "subPort": 10882,\n    "subPath": "/sub/",\n    "tgBotEnable": false,\n    "tgBotToken": "",\n    ...\n  }\n}',
+      },
+      {
+        method: 'POST',
+        path: '/panel/setting/defaultSettings',
+        summary: 'Return the computed default settings based on the request host. Useful to preview what a fresh install would use.',
+      },
+      {
+        method: 'POST',
+        path: '/panel/setting/update',
+        summary: 'Persist every setting at once. The body mirrors the shape returned by /all. Invalid values (bad ports, missing cert pairs, etc.) are rejected before write.',
+        body: '{\n  "webPort": 2053,\n  "webBasePath": "/",\n  "subPort": 10882,\n  "subPath": "/sub/",\n  "tgBotEnable": false,\n  ...\n}',
+      },
+      {
+        method: 'POST',
+        path: '/panel/setting/updateUser',
+        summary: 'Change the panel admin username and password. Requires the current credentials for verification. The session is refreshed with the new values on success.',
+        params: [
+          { name: 'oldUsername', in: 'body', type: 'string', desc: 'Current admin username.' },
+          { name: 'oldPassword', in: 'body', type: 'string', desc: 'Current admin password.' },
+          { name: 'newUsername', in: 'body', type: 'string', desc: 'Desired new username.' },
+          { name: 'newPassword', in: 'body', type: 'string', desc: 'Desired new password.' },
+        ],
+        body: '{\n  "oldUsername": "admin",\n  "oldPassword": "admin",\n  "newUsername": "newadmin",\n  "newPassword": "newpass"\n}',
+      },
+      {
+        method: 'POST',
+        path: '/panel/setting/restartPanel',
+        summary: 'Restart the entire 3x-ui process after a 3-second grace period. The connection drops immediately; the panel comes back online ~5-10 seconds later.',
+      },
+      {
+        method: 'GET',
+        path: '/panel/setting/getDefaultJsonConfig',
+        summary: 'Return the built-in default Xray JSON config template that ships with this panel version.',
+      },
+      {
+        method: 'GET',
+        path: '/panel/setting/getApiToken',
+        summary: 'Return the current API Bearer token. The token is auto-generated on first read so existing installs upgrade transparently.',
+        response: '{\n  "success": true,\n  "obj": "abcdef-12345-..."\n}',
+      },
+      {
+        method: 'POST',
+        path: '/panel/setting/regenerateApiToken',
+        summary: 'Rotate the API Bearer token. Any remote central panel that cached the old value will start failing heartbeats until updated with the new token.',
+        response: '{\n  "success": true,\n  "obj": "new-token-string"\n}',
+      },
+    ],
+  },
+
+  {
+    id: 'xraySettings',
+    title: 'Xray Settings API',
+    description:
+      'Xray configuration template, outbound management, Warp/Nord integration, and config testing. All endpoints under /panel/xray.',
+    endpoints: [
+      {
+        method: 'POST',
+        path: '/panel/xray/',
+        summary: 'Return the Xray config template (JSON string), available inbound tags, client reverse tags, and the configured outbound test URL in one response.',
+        response: '{\n  "success": true,\n  "obj": {\n    "xraySetting": "{...raw xray config...}",\n    "inboundTags": "[\"inbound-443\"]",\n    "clientReverseTags": "[]",\n    "outboundTestUrl": "https://www.google.com/generate_204"\n  }\n}',
+      },
+      {
+        method: 'GET',
+        path: '/panel/xray/getDefaultJsonConfig',
+        summary: 'Return the built-in default Xray config shipped with the panel (identical to /panel/setting/getDefaultJsonConfig).',
+      },
+      {
+        method: 'GET',
+        path: '/panel/xray/getOutboundsTraffic',
+        summary: 'Return traffic statistics for every outbound. Each outbound shows up/down/total counters.',
+      },
+      {
+        method: 'GET',
+        path: '/panel/xray/getXrayResult',
+        summary: 'Return the most recent Xray process stdout/stderr output. Useful to check for startup errors or runtime warnings.',
+      },
+      {
+        method: 'POST',
+        path: '/panel/xray/update',
+        summary: 'Save the Xray JSON config template and optionally the outbound test URL. Both are sent as form fields.',
+        params: [
+          { name: 'xraySetting', in: 'body (form)', type: 'string', desc: 'Full Xray JSON config template.' },
+          { name: 'outboundTestUrl', in: 'body (form)', type: 'string', desc: 'URL used for outbound reachability tests. Defaults to https://www.google.com/generate_204.' },
+        ],
+      },
+      {
+        method: 'POST',
+        path: '/panel/xray/warp/:action',
+        summary: 'Manage Cloudflare Warp integration. The action parameter selects the operation.',
+        params: [
+          { name: 'action', in: 'path', type: 'string', desc: 'data — return Warp stats (quota, remaining). del — delete Warp data. config — return current Warp config. reg — register a new Warp endpoint (sends privateKey, publicKey). license — set a Warp+ license key (sends license).' },
+          { name: 'privateKey', in: 'body (form)', type: 'string', desc: 'Required when action=reg.' },
+          { name: 'publicKey', in: 'body (form)', type: 'string', desc: 'Required when action=reg.' },
+          { name: 'license', in: 'body (form)', type: 'string', desc: 'Required when action=license.' },
+        ],
+      },
+      {
+        method: 'POST',
+        path: '/panel/xray/nord/:action',
+        summary: 'Manage NordVPN integration. The action parameter selects the operation.',
+        params: [
+          { name: 'action', in: 'path', type: 'string', desc: 'countries — list available countries. servers — list servers in a country (sends countryId). reg — get NordVPN credentials (sends token). setKey — store NordVPN API key (sends key). data — return current NordVPN connection data. del — delete NordVPN data.' },
+          { name: 'countryId', in: 'body (form)', type: 'string', desc: 'Required when action=servers.' },
+          { name: 'token', in: 'body (form)', type: 'string', desc: 'Required when action=reg.' },
+          { name: 'key', in: 'body (form)', type: 'string', desc: 'Required when action=setKey.' },
+        ],
+      },
+      {
+        method: 'POST',
+        path: '/panel/xray/resetOutboundsTraffic',
+        summary: 'Reset traffic counters for a specific outbound by tag.',
+        params: [
+          { name: 'tag', in: 'body (form)', type: 'string', desc: 'Outbound tag to reset (e.g. "proxy", "direct").' },
+        ],
+        body: 'tag=proxy',
+      },
+      {
+        method: 'POST',
+        path: '/panel/xray/testOutbound',
+        summary: 'Test an outbound configuration. Sends the outbound JSON (required), optionally all outbounds (to resolve sockopt.dialerProxy dependencies), and a mode flag.',
+        params: [
+          { name: 'outbound', in: 'body (form)', type: 'string', desc: 'JSON-encoded single outbound to test (required).' },
+          { name: 'allOutbounds', in: 'body (form)', type: 'string', desc: 'JSON array of all outbounds — used to resolve dialerProxy chains.' },
+          { name: 'mode', in: 'body (form)', type: 'string', desc: '"tcp" for a fast dial-only probe (parallel-safe). Default/empty uses a full HTTP probe through a temp xray instance.' },
+        ],
+        body: 'outbound={"protocol":"freedom","settings":{}}&mode=tcp',
+      },
+    ],
+  },
+
+  {
+    id: 'subscription',
+    title: 'Subscription Server',
+    description:
+      'A separate HTTP/HTTPS server that serves proxy subscription links (standard, JSON, and Clash) to clients. The server listens on its own port (default 10882) and is configured in Settings → Subscription. Paths are configurable; defaults are shown below. All subscription endpoints set response headers for client apps to read traffic/expiry info.',
+    subHeader: [
+      { name: 'Subscription-Userinfo', desc: 'Traffic and expiry: <code>upload=N; download=N; total=N; expire=TS</code>' },
+      { name: 'Profile-Title', desc: 'Base64-encoded subscription display name' },
+      { name: 'Profile-Web-Page-Url', desc: 'Link to the subscription info page' },
+      { name: 'Support-Url', desc: 'Support contact URL configured in settings' },
+      { name: 'Profile-Update-Interval', desc: 'Suggested polling interval in minutes (e.g. <code>10</code>)' },
+      { name: 'Announce', desc: 'Base64-encoded announcement string' },
+      { name: 'Routing-Enable', desc: '<code>true</code> or <code>false</code> — whether routing rules are included' },
+      { name: 'Routing', desc: 'Global routing rules for client apps that support them (e.g. Happ)' },
+    ],
+    endpoints: [
+      {
+        method: 'GET',
+        path: '/{subPath}:subid',
+        summary: 'Return base64-encoded subscription links for all enabled clients matching the subscription ID. When the request has an Accept: text/html header or ?html=1, renders a styled info page instead. Default path: /sub/:subid.',
+        params: [
+          { name: 'subid', in: 'path', type: 'string', desc: 'Client subscription ID.' },
+        ],
+      },
+      {
+        method: 'GET',
+        path: '/{jsonPath}:subid',
+        summary: 'Return subscription as a JSON array of proxy configs (one per enabled client). Only when JSON subscription is enabled in settings. Default path: /json/:subid.',
+        params: [
+          { name: 'subid', in: 'path', type: 'string', desc: 'Client subscription ID.' },
+        ],
+      },
+      {
+        method: 'GET',
+        path: '/{clashPath}:subid',
+        summary: 'Return subscription as a Clash/Mihomo-compatible YAML config. Only when Clash subscription is enabled in settings. Default path: /clash/:subid.',
+        params: [
+          { name: 'subid', in: 'path', type: 'string', desc: 'Client subscription ID.' },
+        ],
+      },
+    ],
+  },
+
+  {
+    id: 'websocket',
+    title: 'WebSocket',
+    description:
+      'Real-time status updates via WebSocket. Connect once at <code>ws://<panel>/ws</code> to receive a stream of JSON messages without polling. Requires an authenticated session cookie (Bearer token auth is not supported). Each message has a <code>type</code> field that identifies the payload shape.',
+    endpoints: [
+      {
+        method: 'GET',
+        path: '/ws',
+        summary: 'Upgrade an HTTP connection to a WebSocket. Requires an authenticated session cookie (Bearer token auth is not supported here). Returns 101 Switching Protocols on success. The server then pushes JSON messages described below.',
+      },
+      {
+        method: 'WS',
+        path: '→ type: status',
+        summary: 'Server health snapshot pushed every 2 seconds. Contains CPU, memory, swap, disk, network IO, load, and Xray state — same shape as <code>GET /panel/api/server/status</code>.',
+        response: '{\n  "type": "status",\n  "data": { "cpu": 12.5, "mem": { "current": 2147483648, "total": 8589934592 }, "xray": { "state": "running" } }\n}',
+      },
+      {
+        method: 'WS',
+        path: '→ type: xrayState',
+        summary: 'Xray process state change. Fired when Xray starts, stops, or encounters an error.',
+        response: '{\n  "type": "xrayState",\n  "data": "running"\n}',
+      },
+      {
+        method: 'WS',
+        path: '→ type: notification',
+        summary: 'In-panel toast notification. Fired on Xray stop/restart, DB import, panel restart, etc.',
+        response: '{\n  "type": "notification",\n  "title": "Xray service restarted",\n  "body": "Xray has been restarted successfully",\n  "severity": "success"\n}',
+      },
+      {
+        method: 'WS',
+        path: '→ type: invalidate',
+        summary: 'Instructs the UI to re-fetch a resource. Fired when another admin session modifies data (e.g. toggling inbound enable).',
+        response: '{\n  "type": "invalidate",\n  "resource": "inbounds"\n}',
+      },
+    ],
+  },
 ];
 
 export const methodColors = {
@@ -545,4 +863,5 @@ export const methodColors = {
   PUT: 'orange',
   PATCH: 'orange',
   DELETE: 'red',
+  WS: 'purple',
 };

frontend/src/pages/inbounds/ClientRowTable.vue

@@ -32,6 +32,7 @@ const props = defineProps({
   lastOnlineMap: { type: Object, default: () => ({}) },
   isDarkTheme: { type: Boolean, default: false },
   pageSize: { type: Number, default: 0 },
+  totalClientCount: { type: Number, default: 0 },
 });
 
 const emit = defineEmits([
@@ -138,7 +139,7 @@ function statsExpColor(email) {
   return PURPLE;
 }
 
-const isRemovable = computed(() => clients.value.length > 1);
+const isRemovable = computed(() => (props.totalClientCount || clients.value.length) > 1);
 
 function totalGbDisplay(client) {
   if (!client.totalGB || client.totalGB <= 0) return '';

frontend/src/pages/inbounds/InboundFormModal.vue

@@ -1671,6 +1671,74 @@ watch(
               </a-select>
             </a-form-item>
           </template>
+
+          <!-- ====== Hysteria Masquerade ====== -->
+          <!-- Per https://xtls.github.io/config/transports/hysteria.html#masqobject -->
+          <template v-if="protocol === Protocols.HYSTERIA">
+            <a-form-item label="Masquerade">
+              <a-switch v-model:checked="inbound.stream.hysteria.masqueradeSwitch" />
+            </a-form-item>
+            <template v-if="inbound.stream.hysteria.masqueradeSwitch">
+              <a-form-item label="Type">
+                <a-select v-model:value="inbound.stream.hysteria.masquerade.type" :style="{ width: '50%' }">
+                  <a-select-option value="proxy">Proxy</a-select-option>
+                  <a-select-option value="file">File</a-select-option>
+                  <a-select-option value="string">String</a-select-option>
+                </a-select>
+              </a-form-item>
+
+              <!-- Proxy type: url / rewriteHost / insecure -->
+              <template v-if="inbound.stream.hysteria.masquerade.type === 'proxy'">
+                <a-form-item label="URL">
+                  <a-input v-model:value="inbound.stream.hysteria.masquerade.url" placeholder="https://example.com" />
+                </a-form-item>
+                <a-form-item label="Rewrite Host">
+                  <a-switch v-model:checked="inbound.stream.hysteria.masquerade.rewriteHost" />
+                </a-form-item>
+                <a-form-item label="Insecure">
+                  <a-switch v-model:checked="inbound.stream.hysteria.masquerade.insecure" />
+                </a-form-item>
+              </template>
+
+              <!-- File type: dir -->
+              <a-form-item v-if="inbound.stream.hysteria.masquerade.type === 'file'" label="Directory">
+                <a-input v-model:value="inbound.stream.hysteria.masquerade.dir" placeholder="/path/to/www" />
+              </a-form-item>
+
+              <!-- String type: content / statusCode / headers -->
+              <template v-if="inbound.stream.hysteria.masquerade.type === 'string'">
+                <a-form-item label="Content">
+                  <a-textarea v-model:value="inbound.stream.hysteria.masquerade.content"
+                    :auto-size="{ minRows: 2, maxRows: 6 }" />
+                </a-form-item>
+                <a-form-item label="Status Code">
+                  <a-input-number v-model:value="inbound.stream.hysteria.masquerade.statusCode" :min="100" :max="599"
+                    placeholder="200" />
+                </a-form-item>
+                <a-form-item label="Headers">
+                  <a-button size="small" @click="inbound.stream.hysteria.masquerade.addHeader('', '')">
+                    <template #icon>
+                      <PlusOutlined />
+                    </template>
+                  </a-button>
+                </a-form-item>
+                <a-form-item v-if="inbound.stream.hysteria.masquerade.headers.length > 0" :wrapper-col="{ span: 24 }">
+                  <a-input-group v-for="(h, idx) in inbound.stream.hysteria.masquerade.headers" :key="`mh-${idx}`"
+                    compact class="mb-8">
+                    <a-input :style="{ width: '45%' }" v-model:value="h.name" placeholder="Name">
+                      <template #addonBefore>{{ idx + 1 }}</template>
+                    </a-input>
+                    <a-input :style="{ width: '45%' }" v-model:value="h.value" placeholder="Value" />
+                    <a-button @click="inbound.stream.hysteria.masquerade.removeHeader(idx)">
+                      <template #icon>
+                        <MinusOutlined />
+                      </template>
+                    </a-button>
+                  </a-input-group>
+                </a-form-item>
+              </template>
+            </template>
+          </template>
         </a-form>
 
         <!-- ====== FinalMask (TCP/UDP masks + QUIC params) ====== -->

frontend/src/pages/inbounds/InboundList.vue

@@ -395,8 +395,8 @@ function showQrCodeMenu(dbInbound) {
             <div class="stat-row">
               <span class="stat-label">{{ t('pages.inbounds.protocol') }}</span>
               <a-tag color="purple">{{ record.protocol }}</a-tag>
-              <template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS">
-                <a-tag color="green">{{ record.toInbound().stream.network }}</a-tag>
+              <template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS || record.isHysteria">
+                <a-tag color="green">{{ record.isHysteria ? 'UDP' : record.toInbound().stream.network }}</a-tag>
                 <a-tag v-if="record.toInbound().stream.isTls" color="blue">TLS</a-tag>
                 <a-tag v-if="record.toInbound().stream.isReality" color="blue">Reality</a-tag>
               </template>
@@ -430,7 +430,7 @@ function showQrCodeMenu(dbInbound) {
             </div>
             <div v-if="clientCount[record.id]" class="stat-row">
               <span class="stat-label">{{ t('clients') }}</span>
-              <a-tag color="green">{{ clientCount[record.id].clients }}</a-tag>
+              <a-tag color="green" class="client-count-tag">{{ clientCount[record.id].clients }}</a-tag>
               <a-tag v-if="clientCount[record.id].online.length" color="blue">
                 {{ clientCount[record.id].online.length }} {{ t('online') }}
               </a-tag>
@@ -457,7 +457,7 @@ function showQrCodeMenu(dbInbound) {
           <div v-if="record.isMultiUser() && isExpanded(record.id)" class="card-clients">
             <ClientRowTable :db-inbound="record" :is-mobile="true" :traffic-diff="trafficDiff" :expire-diff="expireDiff"
               :online-clients="onlineClients" :last-online-map="lastOnlineMap" :is-dark-theme="isDarkTheme"
-              :page-size="pageSize"
+              :page-size="pageSize" :total-client-count="clientCount[record.id]?.clients || 0"
               @edit-client="(p) => emit('edit-client', p)" @qrcode-client="(p) => emit('qrcode-client', p)"
               @info-client="(p) => emit('info-client', p)"
               @reset-traffic-client="(p) => emit('reset-traffic-client', p)"
@@ -479,6 +479,7 @@ function showQrCodeMenu(dbInbound) {
           <ClientRowTable v-if="record.isMultiUser()" :db-inbound="record" :is-mobile="isMobile"
             :traffic-diff="trafficDiff" :expire-diff="expireDiff" :online-clients="onlineClients"
             :last-online-map="lastOnlineMap" :is-dark-theme="isDarkTheme" :page-size="pageSize"
+            :total-client-count="clientCount[record.id]?.clients || 0"
             @edit-client="(p) => emit('edit-client', p)"
             @qrcode-client="(p) => emit('qrcode-client', p)" @info-client="(p) => emit('info-client', p)"
             @reset-traffic-client="(p) => emit('reset-traffic-client', p)"
@@ -570,8 +571,8 @@ function showQrCodeMenu(dbInbound) {
           <template v-else-if="column.key === 'protocol'">
             <div class="protocol-tags">
               <a-tag color="purple">{{ record.protocol }}</a-tag>
-              <template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS">
-                <a-tag color="green">{{ record.toInbound().stream.network }}</a-tag>
+              <template v-if="record.isVMess || record.isVLess || record.isTrojan || record.isSS || record.isHysteria">
+                <a-tag color="green">{{ record.isHysteria ? 'UDP' : record.toInbound().stream.network }}</a-tag>
                 <a-tag v-if="record.toInbound().stream.isTls" color="blue">TLS</a-tag>
                 <a-tag v-if="record.toInbound().stream.isReality" color="blue">Reality</a-tag>
               </template>
@@ -581,14 +582,14 @@ function showQrCodeMenu(dbInbound) {
           <!-- ============== Clients tag + popovers ============== -->
           <template v-else-if="column.key === 'clients'">
             <template v-if="clientCount[record.id]">
-              <a-tag color="green" style="margin: 0">{{ clientCount[record.id].clients }}</a-tag>
+              <a-tag color="green" class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].clients }}</a-tag>
               <a-popover v-if="clientCount[record.id].deactive.length" :title="t('disabled')">
                 <template #content>
                   <div class="client-email-list">
                     <div v-for="email in clientCount[record.id].deactive" :key="email">{{ email }}</div>
                   </div>
                 </template>
-                <a-tag style="margin: 0; padding: 0 2px">{{ clientCount[record.id].deactive.length }}</a-tag>
+                <a-tag class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].deactive.length }}</a-tag>
               </a-popover>
               <a-popover v-if="clientCount[record.id].depleted.length" :title="t('depleted')">
                 <template #content>
@@ -596,7 +597,7 @@ function showQrCodeMenu(dbInbound) {
                     <div v-for="email in clientCount[record.id].depleted" :key="email">{{ email }}</div>
                   </div>
                 </template>
-                <a-tag color="red" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].depleted.length
+                <a-tag color="red" class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].depleted.length
                 }}</a-tag>
               </a-popover>
               <a-popover v-if="clientCount[record.id].expiring.length" :title="t('depletingSoon')">
@@ -605,7 +606,7 @@ function showQrCodeMenu(dbInbound) {
                     <div v-for="email in clientCount[record.id].expiring" :key="email">{{ email }}</div>
                   </div>
                 </template>
-                <a-tag color="orange" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].expiring.length
+                <a-tag color="orange" class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].expiring.length
                 }}</a-tag>
               </a-popover>
               <a-popover v-if="clientCount[record.id].online.length" :title="t('online')">
@@ -614,7 +615,7 @@ function showQrCodeMenu(dbInbound) {
                     <div v-for="email in clientCount[record.id].online" :key="email">{{ email }}</div>
                   </div>
                 </template>
-                <a-tag color="blue" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].online.length }}</a-tag>
+                <a-tag color="blue" class="client-count-tag" style="margin: 0; padding: 0 2px">{{ clientCount[record.id].online.length }}</a-tag>
               </a-popover>
             </template>
           </template>
@@ -680,7 +681,7 @@ function showQrCodeMenu(dbInbound) {
 }
 
 .filter-bar.mobile>* {
-  margin-bottom: 4px;
+    margin-bottom: 4px;
 }
 
 .protocol-tags {
@@ -689,6 +690,10 @@ function showQrCodeMenu(dbInbound) {
   gap: 4px;
 }
 
+.client-count-tag {
+  font-variant-numeric: tabular-nums;
+}
+
 .row-action-trigger {
   font-size: 20px;
   cursor: pointer;

frontend/src/pages/index/LogModal.vue

@@ -53,7 +53,9 @@ function parseLogLine(line) {
     service = 'X-UI:';
   }
 
-  return { date, time, levelText, levelClass, service, body };
+  const stamp = [date, time].filter(Boolean).join(' ');
+
+  return { date, time, stamp, levelText, levelClass, service, body };
 }
 
 const parsedLogs = computed(() => logs.value.map(parseLogLine));
@@ -133,33 +135,25 @@ const modalWidth = computed(() => (isMobile.value ? '100vw' : '800px'));
       <template v-else-if="isMobile">
         <div v-for="(log, idx) in parsedLogs" :key="idx" class="log-card">
           <div class="log-card-head">
-            <span v-if="log.date || log.time" class="log-time">
-              <span v-if="log.time">{{ log.time }}</span>
-              <span v-if="log.date" class="log-date">{{ log.date }}</span>
+            <span v-if="log.stamp" class="log-time">
+              <span v-if="log.time">{{ log.time }}</span>{{ log.time && log.date ? ' ' : '' }}<span v-if="log.date" class="log-date">{{ log.date }}</span>
             </span>
             <span v-if="log.levelText" class="log-level-badge" :class="log.levelClass">
               {{ log.levelText }}
             </span>
           </div>
           <div v-if="log.body || log.service" class="log-body">
-            <b v-if="log.service">{{ log.service }}</b>
-            <span v-if="log.body" class="log-body-text">{{ log.body }}</span>
+            <b v-if="log.service">{{ log.service }}</b>{{ log.service && log.body ? ' ' : '' }}<span v-if="log.body" class="log-body-text">{{ log.body }}</span>
           </div>
         </div>
       </template>
 
       <template v-else>
         <div v-for="(log, idx) in parsedLogs" :key="idx" class="log-line">
-          <span v-if="log.date || log.time" class="log-stamp">
-            {{ log.date }}<template v-if="log.date && log.time"> </template>{{ log.time }}
-          </span>
-          <span v-if="log.levelText" class="log-level" :class="log.levelClass">
-            {{ log.levelText }}
-          </span>
+          <span v-if="log.stamp" class="log-stamp">{{ log.stamp }}</span>{{ log.stamp && log.levelText ? ' ' : '' }}<span v-if="log.levelText" class="log-level" :class="log.levelClass">{{ log.levelText }}</span>
           <template v-if="log.body || log.service">
             <span> - </span>
-            <b v-if="log.service">{{ log.service }} </b>
-            <span>{{ log.body }}</span>
+            <b v-if="log.service">{{ log.service }}</b>{{ log.service && log.body ? ' ' : '' }}<span>{{ log.body }}</span>
           </template>
         </div>
       </template>

sub/subJsonService.go

@@ -447,6 +447,9 @@ func (s *SubJsonService) genHy(inbound *model.Inbound, newStream map[string]any,
 	if udpIdleTimeout, ok := hyStream["udpIdleTimeout"].(float64); ok {
 		outHyStream["udpIdleTimeout"] = int(udpIdleTimeout)
 	}
+	if masquerade, ok := hyStream["masquerade"].(map[string]any); ok {
+		outHyStream["masquerade"] = masquerade
+	}
 	newStream["hysteriaSettings"] = outHyStream
 
 	if finalmask, ok := hyStream["finalmask"].(map[string]any); ok {

web/controller/api_docs_test.go

@@ -0,0 +1,160 @@
+package controller
+
+import (
+	"os"
+	"path/filepath"
+	"regexp"
+	"strings"
+	"testing"
+)
+
+type routeDef struct {
+	Method string
+	Path   string
+}
+
+// routePattern matches route registrations like g.GET("/path", handler) or api.GET("/path", handler)
+var routePattern = regexp.MustCompile(`\b(g|api)\.(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS)\("([^"]+)"`)
+
+// docRoutePattern matches { method: 'X', path: 'Y' ... } entries in endpoints.js.
+var docRoutePattern = regexp.MustCompile(`method:\s*'([A-Z]+)'\s*,\s*path:\s*'([^']+)'`)
+
+// buildDocSet parses frontend/src/pages/api-docs/endpoints.js and returns the
+// set of documented "METHOD PATH" keys. WS pseudo-routes and subscription
+// placeholders (paths starting with /{...}) are skipped because they aren't
+// registered on the main Gin engine.
+func buildDocSet(t *testing.T) map[string]bool {
+	t.Helper()
+	controllerDir, err := filepath.Abs(".")
+	if err != nil {
+		t.Fatalf("failed to get current dir: %v", err)
+	}
+	endpointsPath := filepath.Join(controllerDir, "..", "..", "frontend", "src", "pages", "api-docs", "endpoints.js")
+	data, err := os.ReadFile(endpointsPath)
+	if err != nil {
+		t.Fatalf("failed to read endpoints.js at %s: %v", endpointsPath, err)
+	}
+	docSet := make(map[string]bool)
+	for _, m := range docRoutePattern.FindAllStringSubmatch(string(data), -1) {
+		method, path := m[1], m[2]
+		if method == "WS" {
+			continue
+		}
+		if !strings.HasPrefix(path, "/") || strings.HasPrefix(path, "/{") {
+			continue
+		}
+		docSet[method+" "+path] = true
+	}
+	if len(docSet) == 0 {
+		t.Fatalf("no documented routes parsed from %s — regex or file format may have changed", endpointsPath)
+	}
+	return docSet
+}
+
+func TestAPIRoutesDocumented(t *testing.T) {
+	docSet := buildDocSet(t)
+
+	controllerDir, err := filepath.Abs(".")
+	if err != nil {
+		t.Fatalf("failed to get current dir: %v", err)
+	}
+
+	var allRoutes []routeDef
+
+	entries, err := os.ReadDir(controllerDir)
+	if err != nil {
+		t.Fatalf("failed to read controller dir: %v", err)
+	}
+
+	for _, entry := range entries {
+		if entry.IsDir() || !strings.HasSuffix(entry.Name(), ".go") || strings.HasSuffix(entry.Name(), "_test.go") {
+			continue
+		}
+		data, err := os.ReadFile(filepath.Join(controllerDir, entry.Name()))
+		if err != nil {
+			t.Fatalf("failed to read %s: %v", entry.Name(), err)
+		}
+		src := string(data)
+
+		// Determine the base path for this file based on its initRouter patterns
+		basePath := ""
+		switch entry.Name() {
+		case "index.go":
+			basePath = ""
+		case "xui.go":
+			basePath = "/panel"
+		case "api.go":
+			basePath = "/panel/api"
+		case "inbound.go":
+			basePath = "/panel/api/inbounds"
+		case "server.go":
+			basePath = "/panel/api/server"
+		case "node.go":
+			basePath = "/panel/api/nodes"
+		case "setting.go":
+			basePath = "/panel/setting"
+		case "xray_setting.go":
+			basePath = "/panel/xray"
+		case "custom_geo.go":
+			basePath = "/panel/api/custom-geo"
+		case "websocket.go":
+			basePath = ""
+		}
+
+		// Find all route registrations
+		matches := routePattern.FindAllStringSubmatch(src, -1)
+		for _, m := range matches {
+			method := m[2]
+			path := strings.TrimSpace(m[3])
+			if basePath == "" {
+				allRoutes = append(allRoutes, routeDef{Method: method, Path: path})
+			} else {
+				fullPath := basePath + path
+				allRoutes = append(allRoutes, routeDef{Method: method, Path: fullPath})
+			}
+		}
+	}
+
+	// The WebSocket route /ws is registered in web/web.go (not a controller file)
+	allRoutes = append(allRoutes, routeDef{Method: "GET", Path: "/ws"})
+
+	missingFromDocs := 0
+	foundInDoc := 0
+	sourceSet := make(map[string]bool)
+
+	for _, r := range allRoutes {
+		key := r.Method + " " + r.Path
+		// Skip SPA page routes (these are UI pages, not API endpoints)
+		spaPages := map[string]bool{
+			"/": true, "/panel/": true, "/panel/inbounds": true,
+			"/panel/nodes": true, "/panel/settings": true,
+			"/panel/xray": true, "/panel/api-docs": true,
+		}
+		if spaPages[r.Path] {
+			continue
+		}
+		// Skip /panel/csrf-token (documented under auth as /csrf-token)
+		if r.Path == "/panel/csrf-token" {
+			continue
+		}
+		// Skip Chrome DevTools route
+		if strings.Contains(r.Path, ".well-known") {
+			continue
+		}
+
+		sourceSet[key] = true
+		if docSet[key] {
+			foundInDoc++
+		} else {
+			missingFromDocs++
+			t.Errorf("Route not documented in endpoints.js: %s %s", r.Method, r.Path)
+		}
+	}
+
+	t.Logf("Routes found in source: %d, documented: %d, matching: %d, missing: %d",
+		len(sourceSet), len(docSet), foundInDoc, missingFromDocs)
+
+	if missingFromDocs > 0 {
+		t.Errorf("Found %d undocumented route(s). Update endpoints.js to match.", missingFromDocs)
+	}
+}

web/service/inbound.go

@@ -2036,6 +2036,7 @@ func (s *InboundService) autoRenewClients(tx *gorm.DB) (bool, int64, error) {
 					traffics[traffic_index].Up = 0
 					if !traffic.Enable {
 						traffics[traffic_index].Enable = true
+						c["enable"] = true
 						clientsToAdd = append(clientsToAdd,
 							struct {
 								protocol string

x-ui.sh

@@ -2092,7 +2092,7 @@ EOF
 
     cat << EOF > /etc/fail2ban/filter.d/3x-ipl.conf
 [Definition]
-datepattern = ^%Y/%m/%d %H:%M:%S
+datepattern = ^%%Y/%%m/%%d %%H:%%M:%%S
 failregex   = \[LIMIT_IP\]\s*Email\s*=\s*<F-USER>.+</F-USER>\s*\|\|\s*Disconnecting OLD IP\s*=\s*<ADDR>\s*\|\|\s*Timestamp\s*=\s*\d+
 ignoreregex =
 EOF