feat(xray): browse geosite/geoip categories from routing rules (#6165)

* feat(xray): browse geosite/geoip categories from routing rules Routing rules made you type category names from memory: nothing showed which categories a database actually contains, what is inside one, or whether a name resolves at all — a typo only surfaced when Xray refused the config. The panel now reads Xray's .dat databases itself and exposes them over four endpoints: databases in the asset folder, a database's categories, one page of a category's rules, and validation of the tokens already in a rule. The reader walks the protobuf wire format directly rather than decoding into Go structs, because a 10 MB geosite.dat holds well over a million domains and materialising them costs ~284 MB where streaming costs ~19 MB. Only the category index is cached, entry pages are scanned on demand, and scans are serialised, so twenty concurrent requests peak at 87 MB instead of 1 GB. A database's type is decided by its contents, not its file name, since custom .dat files are named freely. In the rule form, the source-IP, IP and domain fields gain a database button opening the browser: search over categories, a preview of what a category holds, and a multi-select that merges into the field. Plain domains, CIDRs and categories the panel does not know are left untouched; categories already present come back ticked, and unticking one removes it from the rule. * fix(xray): read geo databases through os.Root and match codes verbatim CodeQL flagged the database read as a path built from a user-supplied value, and it was right about the shape of it. The file name arrives in a request; resolve() rejects traversal and stats the file through an os.Root, but the read itself went through a joined path with os.ReadFile. That left the symlink defence incomplete: the stat could pass while the read followed a link planted — or swapped in — afterwards. Reads now go through the same root, so a request-supplied name never becomes a path this code resolves on its own, and the size limit is applied to the opened file rather than to a separate stat of it. Lookup no longer trims the category code either. It backs the routing-token validator, and the core matches codes verbatim: "geosite: cn" will not start Xray, so repairing that space here hid exactly the typo the validator exists to report. * fix(xray): address review findings on the geo category browser Asset folder. The browser read config.GetBinFolderPath() unconditionally, but the core honours a preset XRAY_LOCATION_ASSET and only falls back to the bin folder (ensureXrayAssetLocation). On an install pointing at a shared asset directory the panel listed an empty folder and reported perfectly valid geosite:/geoip: tokens as missing — the validator warning about a correct config. The directory is now resolved with the core's precedence. Paging. Serving one page read and rescanned the whole database, so walking category-ads-all re-read it per page. The index now records each category's byte range and a page reads only that record through the os.Root handle, with the current category's records held for the duration of a paging session. Profiling that also showed the real cost was not the read but the slice of payload pointers built per call — a category holds a hundred thousand of them — so records are now walked with a callback instead. Ten pages over category-ads-all: 239 MB allocated, now 4.3 MB. Cached failures. Any error from reading a file was latched under the file's size+mtime, so a transient ENOMEM or EMFILE marked a healthy database as damaged until it changed on disk. Only deterministic failures are cached. Wrong kind. A geoip: token typed into a domain field parsed as a plain domain and was waved through, though the core cannot resolve it as one. It is now reported, with its own reason and wording. Frontend. The category filter fed the query key on every keystroke, so each character triggered a request that re-scanned the database; it is debounced now. GeoTokenInput accepts and forwards a ref, so React Hook Form can focus these three fields on a validation error again. A failed validation shows that it failed instead of rendering the same empty state as "no issues". Also drops an unreachable branch in the token-count guard and corrects the categories endpoint docs, where limit is unbounded by default. --------- Co-authored-by: STRENCH0 <17428017+STRENCH0@users.noreply.github.com>
2026-09-16 15:17:14 +00:00 · 2026-08-15 18:12:59 +03:00
parent 7c8a9a6909
commit d7698ec7aa
43 changed files with 5433 additions and 6 deletions
@@ -0,0 +1,221 @@
+.geo-browser-modal .geo-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.geo-browser-modal .geo-toolbar .ant-input-search {
+  flex: 1;
+  min-width: 180px;
+}
+
+.geo-browser-modal .geo-meta {
+  margin-inline-start: auto;
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+}
+
+.geo-browser-modal .geo-columns {
+  display: grid;
+  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
+  gap: 12px;
+  height: 440px;
+}
+
+/* Both panes are the same fixed height, and the pager sits on the pane's floor
+   rather than under the last row, so neither the dialog nor its controls move
+   as the user steps between categories with wildly different rule counts. */
+.geo-browser-modal .geo-panel {
+  height: 100%;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+}
+
+.geo-browser-modal .geo-panel .ant-table-wrapper,
+.geo-browser-modal .geo-panel .ant-spin-nested-loading,
+.geo-browser-modal .geo-panel .ant-spin-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+
+.geo-browser-modal .geo-panel .ant-table {
+  flex: 1;
+  min-height: 0;
+}
+
+/* The rules table fills whatever is left between the header and the pager
+   instead of carrying a hardcoded scroll height, so there is no dead strip
+   above the pager and short categories do not scroll needlessly. */
+.geo-browser-modal .geo-preview-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.geo-browser-modal .geo-pager {
+  margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  padding: 6px 12px;
+  border-top: 1px solid var(--ant-color-border-secondary);
+  font-variant-numeric: tabular-nums;
+}
+
+.geo-browser-modal .geo-pager .ant-pagination-total-text {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+}
+
+.geo-browser-modal .geo-categories .ant-table-row {
+  cursor: pointer;
+}
+
+.geo-browser-modal .geo-row-active > td {
+  background: var(--ant-color-primary-bg);
+}
+
+.geo-browser-modal .geo-category {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.geo-browser-modal .geo-code,
+.geo-browser-modal .geo-entry-value,
+.geo-browser-modal .geo-preview-title {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 13px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.geo-browser-modal .geo-attrs .ant-tag {
+  font-size: 10px;
+  line-height: 16px;
+  margin-inline-end: 4px;
+  padding-inline: 4px;
+}
+
+.geo-browser-modal .geo-count {
+  font-variant-numeric: tabular-nums;
+  color: var(--ant-color-text-tertiary);
+  font-size: 12px;
+}
+
+.geo-browser-modal .geo-preview-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--ant-color-border-secondary);
+}
+
+/* The title is the part that gives way: without min-width it refuses to
+   shrink, and the filter is pushed onto a second line instead of the long
+   category name being clipped. */
+.geo-browser-modal .geo-preview-title {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.geo-browser-modal .geo-preview-head .ant-typography {
+  flex: none;
+  white-space: nowrap;
+}
+
+.geo-browser-modal .geo-entry-filter {
+  flex: none;
+  width: 200px;
+  margin-inline-start: auto;
+}
+
+@media (max-width: 520px) {
+  .geo-browser-modal .geo-preview-head {
+    flex-wrap: wrap;
+  }
+
+  .geo-browser-modal .geo-entry-filter {
+    width: 100%;
+  }
+}
+
+.geo-browser-modal .geo-kind {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.geo-browser-modal .geo-kind-full {
+  color: var(--ant-color-success);
+}
+
+.geo-browser-modal .geo-kind-keyword {
+  color: var(--ant-color-warning);
+}
+
+.geo-browser-modal .geo-kind-regexp {
+  color: var(--ant-color-primary);
+}
+
+.geo-browser-modal .geo-placeholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.geo-browser-modal .geo-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--ant-color-border-secondary);
+}
+
+.geo-browser-modal .geo-chips {
+  flex: 1;
+  max-height: 76px;
+  overflow-y: auto;
+}
+
+.geo-browser-modal .geo-selected-count {
+  font-size: 12px;
+  color: var(--ant-color-text-tertiary);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+@media (max-width: 720px) {
+  .geo-browser-modal .geo-columns {
+    grid-template-columns: minmax(0, 1fr);
+    height: auto;
+  }
+
+  .geo-browser-modal .geo-panel {
+    height: 320px;
+  }
+}
+
+.geo-unknown-hint {
+  display: block;
+  margin-top: 4px;
+  font-size: 12px;
+}
@@ -0,0 +1,457 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { expect, within } from 'storybook/test';
+import { Button, Space, Typography } from 'antd';
+
+import type { GeoCategory, GeoEntry, GeoFile } from '@/generated/types';
+
+import GeoBrowserModal, { type GeoBrowserModalProps } from './GeoBrowserModal';
+
+type GeoResponder = (query: URLSearchParams) => unknown;
+type GeoRoutes = Record<string, GeoResponder>;
+
+const realFetch = window.fetch.bind(window);
+let activeRoutes: GeoRoutes = {};
+
+function requestUrl(input: RequestInfo | URL): URL {
+  if (typeof input === 'string') return new URL(input, window.location.origin);
+  if (input instanceof URL) return input;
+  return new URL(input.url, window.location.origin);
+}
+
+function geoFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  const url = requestUrl(input);
+  const responder = activeRoutes[url.pathname];
+  if (!responder) return realFetch(input, init);
+  const body = JSON.stringify({ success: true, msg: '', obj: responder(url.searchParams) });
+  return Promise.resolve(
+    new Response(body, { status: 200, headers: { 'content-type': 'application/json' } }),
+  );
+}
+
+function activate(routes: GeoRoutes): void {
+  activeRoutes = routes;
+  window.fetch = geoFetch;
+}
+
+function deactivate(routes: GeoRoutes): void {
+  if (activeRoutes === routes) activeRoutes = {};
+}
+
+function GeoApi({ routes, children }: { routes: GeoRoutes; children: ReactNode }) {
+  const [client] = useState(() => {
+    activate(routes);
+    return new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  });
+  useEffect(() => {
+    activate(routes);
+    return () => deactivate(routes);
+  }, [routes]);
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
+
+const domain = (value: string): GeoEntry => ({ kind: 'domain', value });
+const full = (value: string): GeoEntry => ({ kind: 'full', value });
+const keyword = (value: string): GeoEntry => ({ kind: 'keyword', value });
+const regexp = (value: string): GeoEntry => ({ kind: 'regexp', value });
+const cidr = (value: string): GeoEntry => ({ kind: 'cidr', value });
+
+const cross = (names: string[], suffixes: string[]): GeoEntry[] =>
+  names.flatMap((name) => suffixes.map((suffix) => domain(`${name}.${suffix}`)));
+
+const CC_TLDS = [
+  'ae', 'al', 'am', 'at', 'az', 'ba', 'be', 'bg', 'bi', 'bj', 'ca', 'cat', 'cd', 'cf', 'cg', 'ch',
+  'ci', 'cl', 'cm', 'co.id', 'co.il', 'co.in', 'co.jp', 'co.ke', 'co.kr', 'co.ma', 'co.nz', 'co.th',
+  'co.uk', 'co.uz', 'co.ve', 'co.za', 'com.ar', 'com.au', 'com.bd', 'com.br', 'com.co', 'com.cu',
+  'com.eg', 'com.gt', 'com.hk', 'com.mx', 'com.my', 'com.ng', 'com.pe', 'com.ph', 'com.pk',
+  'com.sa', 'com.sg', 'com.tr', 'com.tw', 'com.ua', 'com.uy', 'com.vn', 'cz', 'de', 'dj', 'dk',
+  'dz', 'ee', 'es', 'fi', 'fr', 'ga', 'ge', 'gl', 'gm', 'gr', 'hn', 'hr', 'ht', 'hu', 'ie', 'iq',
+  'is', 'it', 'je', 'jo', 'kg', 'kz', 'la', 'li', 'lk', 'lt', 'lu', 'lv', 'ly', 'md', 'me', 'mg',
+  'mk', 'ml', 'mn', 'mu', 'mv', 'mw', 'ne', 'nl', 'no', 'nu', 'pl', 'pt', 'ro', 'rs', 'ru', 'rw',
+  'se', 'sh', 'si', 'sk', 'sm', 'sn', 'so', 'sr', 'st', 'td', 'tg', 'tk', 'tl', 'tm', 'tn', 'to',
+  'tt', 'vg', 'vu', 'ws',
+];
+
+const AD_HOSTS = [
+  'adform', 'adnxs', 'adroll', 'adsrvr', 'amplitude', 'appsflyer', 'bluekai', 'branch',
+  'casalemedia', 'criteo', 'flurry', 'moatads', 'mopub', 'openx', 'outbrain', 'pubmatic',
+  'quantserve', 'rubiconproject', 'scorecardresearch', 'sharethrough', 'smartadserver', 'taboola',
+  'teads', 'yieldmo', 'zemanta',
+];
+
+const CN_BRANDS = [
+  '58', 'alibaba', 'alipay', 'aliyun', 'baidu', 'bilibili', 'cnblogs', 'csdn', 'ctrip', 'douban',
+  'gitee', 'huawei', 'iqiyi', 'jd', 'kuaishou', 'meituan', 'netease', 'pinduoduo', 'qq', 'sina',
+  'sohu', 'taobao', 'tencent', 'tmall', 'toutiao', 'weibo', 'xiaomi', 'youku', 'zhihu',
+];
+
+const SITE_ENTRIES: Record<string, GeoEntry[]> = {
+  amazon: [
+    domain('amazon.com'), domain('amazonaws.com'), domain('media-amazon.com'),
+    domain('ssl-images-amazon.com'), domain('primevideo.com'), domain('awsstatic.com'),
+    domain('cloudfront.net'), full('www.amazon.co.jp'),
+  ],
+  apple: [
+    domain('apple.com'), domain('icloud.com'), domain('cdn-apple.com'), domain('mzstatic.com'),
+    domain('apple-cloudkit.com'), domain('itunes.com'), domain('me.com'), domain('appstore.com'),
+  ],
+  'category-ads': [
+    domain('adcolony.com'), domain('applovin.com'), domain('chartboost.com'),
+    domain('inmobi.com'), domain('unityads.unity3d.com'), keyword('banner-ad'),
+  ],
+  'category-ads-all': [
+    domain('doubleclick.net'), domain('googleadservices.com'), domain('googlesyndication.com'),
+    domain('adservice.google.com'), full('ads.yahoo.com'), keyword('adservice'),
+    keyword('advertising'), regexp('^ad[0-9]{1,3}\\.'), ...cross(AD_HOSTS, ['com', 'net', 'io', 'ru']),
+  ],
+  cloudflare: [
+    domain('cloudflare.com'), domain('cloudflare-dns.com'), domain('cloudflareinsights.com'),
+    domain('workers.dev'), domain('pages.dev'), domain('cf-ipfs.com'),
+  ],
+  cn: [full('www.gov.cn'), keyword('chinanet'), ...cross(CN_BRANDS, ['com', 'cn', 'com.cn'])],
+  discord: [
+    domain('discord.com'), domain('discord.gg'), domain('discordapp.com'),
+    domain('discordapp.net'), domain('discord.media'),
+  ],
+  facebook: [
+    domain('facebook.com'), domain('fbcdn.net'), domain('fb.com'), domain('messenger.com'),
+    domain('fbsbx.com'), domain('facebook.net'), full('m.facebook.com'),
+  ],
+  'geolocation-!cn': [
+    keyword('proxy'), regexp('.*\\.onion$'), domain('wikipedia.org'), domain('bbc.com'),
+    domain('nytimes.com'), domain('reuters.com'), domain('medium.com'), domain('reddit.com'),
+  ],
+  'geolocation-cn': [
+    domain('gov.cn'), domain('edu.cn'), domain('org.cn'), domain('net.cn'),
+    ...cross(CN_BRANDS.slice(0, 18), ['cn']),
+  ],
+  github: [
+    domain('github.com'), domain('githubusercontent.com'), domain('githubassets.com'),
+    domain('github.io'), domain('ghcr.io'), domain('git.io'),
+  ],
+  google: [
+    domain('google.com'), domain('googleapis.com'), domain('gstatic.com'),
+    domain('googleusercontent.com'), domain('google-analytics.com'), domain('googletagmanager.com'),
+    domain('ggpht.com'), domain('withgoogle.com'), domain('android.com'), domain('chromium.org'),
+    domain('abc.xyz'), full('dl.google.com'), ...CC_TLDS.map((tld) => domain(`google.${tld}`)),
+  ],
+  instagram: [domain('instagram.com'), domain('cdninstagram.com'), domain('ig.me')],
+  microsoft: [
+    domain('microsoft.com'), domain('live.com'), domain('office.com'), domain('office365.com'),
+    domain('windows.net'), domain('windowsupdate.com'), domain('msn.com'), domain('azure.com'),
+    domain('sharepoint.com'), domain('skype.com'), domain('bing.com'),
+  ],
+  netflix: [
+    domain('netflix.com'), domain('netflix.net'), domain('nflximg.com'), domain('nflximg.net'),
+    domain('nflxvideo.net'), domain('nflxso.net'), domain('nflxext.com'), full('fast.com'),
+  ],
+  openai: [
+    domain('openai.com'), domain('chatgpt.com'), domain('oaistatic.com'),
+    domain('oaiusercontent.com'), domain('sora.com'),
+  ],
+  spotify: [
+    domain('spotify.com'), domain('scdn.co'), domain('spotifycdn.com'), domain('spoti.fi'),
+    domain('spotifycdn.net'),
+  ],
+  steam: [
+    domain('steampowered.com'), domain('steamcommunity.com'), domain('steamstatic.com'),
+    domain('steamcontent.com'), domain('valvesoftware.com'),
+  ],
+  telegram: [
+    domain('telegram.org'), domain('telegram.me'), domain('t.me'), domain('telesco.pe'),
+    domain('tdesktop.com'), domain('telegra.ph'), domain('cdn-telegram.org'),
+    full('comments.app'), keyword('telegram'),
+  ],
+  tiktok: [
+    domain('tiktok.com'), domain('tiktokcdn.com'), domain('tiktokv.com'),
+    domain('byteoversea.com'), domain('ibytedtos.com'), domain('musical.ly'),
+  ],
+  twitch: [domain('twitch.tv'), domain('ttvnw.net'), domain('jtvnw.net'), domain('twitchcdn.net')],
+  twitter: [
+    domain('twitter.com'), domain('x.com'), domain('t.co'), domain('twimg.com'),
+    domain('periscope.tv'),
+  ],
+  whatsapp: [domain('whatsapp.com'), domain('whatsapp.net'), domain('wa.me')],
+  youtube: [
+    domain('youtube.com'), domain('youtu.be'), domain('ytimg.com'), domain('googlevideo.com'),
+    domain('youtube-nocookie.com'), domain('yt.be'),
+  ],
+};
+
+const SITE_ATTRIBUTES: Record<string, string[]> = {
+  amazon: ['ads'],
+  apple: ['cn'],
+  facebook: ['ads'],
+  google: ['ads', 'cn'],
+  instagram: ['ads'],
+  microsoft: ['cn'],
+  tiktok: ['ads', 'cn'],
+  twitter: ['ads'],
+  youtube: ['ads'],
+};
+
+const CN_BLOCKS = [
+  '1.0.1.0/24', '1.0.2.0/23', '1.0.8.0/21', '14.0.12.0/22', '27.0.128.0/21', '36.0.0.0/22',
+  '39.0.0.0/24', '42.0.0.0/22', '58.14.0.0/15', '59.32.0.0/11', '61.128.0.0/10', '101.16.0.0/12',
+  '103.1.8.0/22', '106.0.0.0/10', '110.6.0.0/15', '111.0.0.0/10', '112.0.0.0/10', '113.0.0.0/9',
+  '114.28.0.0/16', '116.0.0.0/9', '117.8.0.0/13', '118.24.0.0/15', '119.0.0.0/9', '120.0.0.0/10',
+  '121.0.0.0/8', '124.0.0.0/8', '125.32.0.0/11', '139.196.0.0/14', '140.75.0.0/16', '175.0.0.0/12',
+  '180.76.0.0/16', '182.16.0.0/12', '183.0.0.0/10', '202.0.0.0/12', '203.0.0.0/12', '210.0.0.0/12',
+  '211.64.0.0/11', '218.0.0.0/9', '219.72.0.0/14', '220.112.0.0/12', '221.0.0.0/9', '222.16.0.0/12',
+  '2001:250::/35', '2400:3200::/32', '2408:8000::/20',
+];
+
+const CN_EXTRA_BLOCKS = Array.from({ length: 96 }, (_, index) =>
+  `${39 + Math.floor(index / 16)}.${(index % 16) * 16}.0.0/12`,
+);
+
+const IP_ENTRIES: Record<string, GeoEntry[]> = {
+  cloudflare: [
+    '103.21.244.0/22', '103.22.200.0/22', '103.31.4.0/22', '104.16.0.0/13', '104.24.0.0/14',
+    '108.162.192.0/18', '131.0.72.0/22', '141.101.64.0/18', '162.158.0.0/15', '172.64.0.0/13',
+    '173.245.48.0/20', '188.114.96.0/20', '190.93.240.0/20', '197.234.240.0/22', '198.41.128.0/17',
+    '2400:cb00::/32', '2606:4700::/32',
+  ].map(cidr),
+  cn: [...CN_BLOCKS, ...CN_EXTRA_BLOCKS].map(cidr),
+  facebook: [
+    '31.13.24.0/21', '31.13.64.0/18', '66.220.144.0/20', '69.63.176.0/20', '69.171.224.0/19',
+    '157.240.0.0/16', '179.60.192.0/22', '185.60.216.0/22', '2a03:2880::/32',
+  ].map(cidr),
+  google: [
+    '8.8.4.0/24', '8.8.8.0/24', '34.64.0.0/10', '35.184.0.0/13', '64.233.160.0/19', '66.102.0.0/20',
+    '72.14.192.0/18', '74.125.0.0/16', '108.177.8.0/21', '142.250.0.0/15', '172.217.0.0/16',
+    '216.58.192.0/19', '2404:6800::/32', '2607:f8b0::/32',
+  ].map(cidr),
+  ir: [
+    '2.144.0.0/14', '5.22.0.0/17', '31.2.128.0/17', '37.32.0.0/19', '46.32.0.0/19', '78.38.0.0/15',
+    '80.191.0.0/16', '85.15.0.0/18', '91.98.0.0/15', '178.22.72.0/21', '185.8.172.0/22',
+    '188.34.0.0/17', '217.218.0.0/15',
+  ].map(cidr),
+  netflix: [
+    '23.246.0.0/18', '37.77.184.0/21', '45.57.0.0/17', '64.120.128.0/17', '66.197.128.0/17',
+    '108.175.32.0/20', '185.2.220.0/22', '192.173.64.0/18', '198.38.96.0/19', '198.45.48.0/20',
+  ].map(cidr),
+  private: [
+    '0.0.0.0/8', '10.0.0.0/8', '100.64.0.0/10', '127.0.0.0/8', '169.254.0.0/16', '172.16.0.0/12',
+    '192.0.0.0/24', '192.0.2.0/24', '192.168.0.0/16', '198.18.0.0/15', '198.51.100.0/24',
+    '203.0.113.0/24', '224.0.0.0/4', '240.0.0.0/4', '255.255.255.255/32', '::1/128', 'fc00::/7',
+    'fe80::/10',
+  ].map(cidr),
+  ru: [
+    '2.60.0.0/14', '5.8.0.0/19', '31.6.0.0/17', '37.9.0.0/19', '46.16.0.0/21', '62.76.0.0/18',
+    '77.37.128.0/17', '78.24.216.0/21', '79.104.0.0/15', '80.64.128.0/19', '81.16.96.0/19',
+    '82.140.128.0/18', '85.113.0.0/16', '87.226.0.0/16', '91.77.0.0/16', '93.157.0.0/17',
+    '94.19.0.0/16', '95.24.0.0/13', '178.176.0.0/13', '188.128.0.0/13', '213.87.0.0/16',
+    '217.66.152.0/21', '2a00:1148::/32',
+  ].map(cidr),
+  telegram: [
+    '91.108.4.0/22', '91.108.8.0/22', '91.108.12.0/22', '91.108.16.0/22', '91.108.20.0/22',
+    '91.108.56.0/22', '149.154.160.0/20', '2001:67c:4e8::/48', '2001:b28:f23d::/48',
+    '2001:b28:f23f::/48',
+  ].map(cidr),
+  us: [
+    '3.0.0.0/9', '12.0.0.0/8', '23.192.0.0/11', '34.192.0.0/10', '50.16.0.0/14', '52.0.0.0/10',
+    '63.64.0.0/11', '65.0.0.0/10', '68.32.0.0/11', '71.0.0.0/11', '96.0.0.0/9', '128.0.0.0/10',
+    '199.0.0.0/12', '208.64.0.0/12', '2600:1f00::/24',
+  ].map(cidr),
+};
+
+function categoriesOf(
+  entries: Record<string, GeoEntry[]>,
+  attributes: Record<string, string[]> = {},
+): GeoCategory[] {
+  return Object.keys(entries)
+    .sort()
+    .map((code) => ({ code, entries: entries[code].length, attributes: attributes[code] ?? [] }));
+}
+
+const SITE_CATEGORIES = categoriesOf(SITE_ENTRIES, SITE_ATTRIBUTES);
+const IP_CATEGORIES = categoriesOf(IP_ENTRIES);
+
+const UPDATED_AT = Date.UTC(2026, 6, 24, 3, 12);
+
+const GEOSITE_FILE: GeoFile = {
+  name: 'geosite.dat',
+  kind: 'site',
+  size: 4_812_544,
+  modifiedAt: UPDATED_AT,
+  categories: SITE_CATEGORIES.length,
+};
+
+const GEOIP_FILE: GeoFile = {
+  name: 'geoip.dat',
+  kind: 'ip',
+  size: 8_694_272,
+  modifiedAt: UPDATED_AT,
+  categories: IP_CATEGORIES.length,
+};
+
+const DAMAGED_FILE: GeoFile = {
+  name: 'geosite-custom.dat',
+  kind: 'site',
+  size: 262_144,
+  modifiedAt: Date.UTC(2026, 5, 2, 19, 45),
+  categories: 0,
+  error: 'proto: cannot parse invalid wire-format data',
+};
+
+const OVERSIZED_FILE: GeoFile = {
+  name: 'geoip-full.dat',
+  kind: 'ip',
+  size: 96_468_992,
+  modifiedAt: Date.UTC(2026, 6, 20, 8, 5),
+  categories: 0,
+  error: 'geodata file is too large to browse',
+};
+
+const DATASETS: Record<string, { categories: GeoCategory[]; entries: Record<string, GeoEntry[]> }> = {
+  'geosite.dat': { categories: SITE_CATEGORIES, entries: SITE_ENTRIES },
+  'geoip.dat': { categories: IP_CATEGORIES, entries: IP_ENTRIES },
+};
+
+function routesFor(files: GeoFile[]): GeoRoutes {
+  return {
+    '/panel/api/xray/geodata/files': () => files,
+    '/panel/api/xray/geodata/categories': (query) => {
+      const dataset = DATASETS[query.get('file') ?? ''];
+      const needle = (query.get('q') ?? '').trim().toLowerCase();
+      const items = (dataset?.categories ?? []).filter((category) => category.code.includes(needle));
+      return { total: items.length, items };
+    },
+    '/panel/api/xray/geodata/entries': (query) => {
+      const dataset = DATASETS[query.get('file') ?? ''];
+      const needle = (query.get('q') ?? '').trim().toLowerCase();
+      const matched = (dataset?.entries[query.get('code') ?? ''] ?? []).filter((entry) =>
+        entry.value.toLowerCase().includes(needle),
+      );
+      const offset = Number(query.get('offset') ?? 0);
+      const limit = Number(query.get('limit') ?? 100);
+      return { total: matched.length, items: matched.slice(offset, offset + limit) };
+    },
+  };
+}
+
+function withFiles(files: GeoFile[]): Decorator {
+  const routes = routesFor(files);
+  return function GeodataBackend(Story) {
+    return (
+      <GeoApi routes={routes}>
+        <Story />
+      </GeoApi>
+    );
+  };
+}
+
+const withDatabases = withFiles([GEOSITE_FILE, GEOIP_FILE]);
+
+function BrowserDemo(props: GeoBrowserModalProps) {
+  const [open, setOpen] = useState(props.open);
+  const [value, setValue] = useState(props.value);
+  useEffect(() => setOpen(props.open), [props.open]);
+  useEffect(() => setValue(props.value), [props.value]);
+  return (
+    <Space direction="vertical" size={12}>
+      <Space size={8}>
+        <Button onClick={() => setOpen(true)}>Open geo browser</Button>
+        <Typography.Text code>{value || 'no rule yet'}</Typography.Text>
+      </Space>
+      <GeoBrowserModal
+        {...props}
+        open={open}
+        value={value}
+        onApply={(next) => {
+          setValue(next);
+          setOpen(false);
+        }}
+        onClose={() => setOpen(false)}
+      />
+    </Space>
+  );
+}
+
+const meta = {
+  title: 'Geodata/GeoBrowserModal',
+  component: GeoBrowserModal,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+    docs: {
+      description: {
+        component:
+          'Browser for the geosite/geoip `.dat` databases Xray resolves `geosite:` and `geoip:` routing tokens against: pick a database, search its categories, tick the ones a rule needs, and preview the domains or CIDRs inside the highlighted category. Applying merges the ticked categories back into the rule string, keeping hand-typed domains untouched. The stories serve `/panel/api/xray/geodata/*` from an in-memory fixture, so search, paging and selection all work without a panel backend.',
+      },
+    },
+  },
+  args: {
+    open: true,
+    kind: 'site',
+    value: '',
+    onApply: () => undefined,
+    onClose: () => undefined,
+  },
+  argTypes: {
+    open: { description: 'Whether the modal is visible.' },
+    kind: {
+      description: 'Which database layout the rule targets: `site` for domain rules, `ip` for CIDR rules. Decides the preselected database and the token prefix.',
+      control: 'inline-radio',
+      options: ['site', 'ip'],
+    },
+    value: {
+      description: 'Current rule string, comma separated. Tokens that match a category in the opened database come back preselected.',
+    },
+    onApply: { description: 'Called with the merged rule string when Apply is pressed.' },
+    onClose: { description: 'Called when the modal is dismissed.' },
+  },
+  render: (args) => <BrowserDemo {...args} />,
+} satisfies Meta<typeof GeoBrowserModal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SiteDatabase: Story = {
+  decorators: [withDatabases],
+  args: { kind: 'site', value: 'geosite:google, geosite:telegram, ads.example.com' },
+};
+
+export const CategoryPreview: Story = {
+  decorators: [withDatabases],
+  args: { kind: 'site', value: 'geosite:google' },
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: false },
+          { id: 'scrollable-region-focusable', enabled: false },
+        ],
+      },
+    },
+  },
+  play: async ({ canvasElement, userEvent }) => {
+    const body = within(canvasElement.ownerDocument.body);
+    await userEvent.type(await body.findByPlaceholderText('Search category'), 'telegram');
+    await userEvent.click(await body.findByText('telegram'));
+    await expect(await body.findByText('t.me')).toBeVisible();
+  },
+};
+
+export const IpDatabase: Story = {
+  decorators: [withDatabases],
+  args: { kind: 'ip', value: 'geoip:private, 10.0.0.0/8' },
+};
+
+export const NoDatabases: Story = {
+  decorators: [withFiles([])],
+  args: { kind: 'site', value: 'geosite:google' },
+};
+
+export const DamagedDatabase: Story = {
+  decorators: [withFiles([GEOSITE_FILE, DAMAGED_FILE, OVERSIZED_FILE])],
+  args: { kind: 'site', value: '' },
+};
@@ -0,0 +1,413 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert, Button, Empty, Input, Modal, Pagination, Select, Space, Table, Tag, Tooltip, Typography } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+
+import { useGeodataCategories, useGeodataEntries, useGeodataFiles } from '@/api/queries/useGeodata';
+import { canonicalToken, mergeSelection, selectionFromValue, tokenFor } from '@/lib/xray/geoTokens';
+import { SizeFormatter } from '@/utils';
+import type { GeoCategory, GeoEntry, GeoFile, GeoKind } from '@/generated/types';
+
+import './GeoBrowserModal.css';
+
+const ENTRY_PAGE_SIZE = 100;
+const CATEGORY_SCROLL_HEIGHT = 438;
+const ENTRY_FILTER_DELAY = 500;
+
+export interface GeoBrowserModalProps {
+  open: boolean;
+  kind: GeoKind;
+  value: string;
+  onApply: (value: string) => void;
+  onClose: () => void;
+}
+
+// A geosite category inside an ip rule (or the reverse) is a config Xray will
+// reject, so a field only ever offers databases of its own kind.
+function databasesFor(files: GeoFile[], kind: GeoKind): GeoFile[] {
+  return files.filter((file) => file.kind === kind || (file.error && namePrefersKind(file.name, kind)));
+}
+
+function namePrefersKind(name: string, kind: GeoKind): boolean {
+  return name.toLowerCase().includes('ip') === (kind === 'ip');
+}
+
+function preferredFile(files: GeoFile[], kind: GeoKind): string | undefined {
+  const usable = databasesFor(files, kind).filter((file) => !file.error);
+  const preferredName = kind === 'ip' ? 'geoip.dat' : 'geosite.dat';
+  return usable.find((file) => file.name === preferredName)?.name ?? usable[0]?.name;
+}
+
+export default function GeoBrowserModal({ open, kind, value, onApply, onClose }: GeoBrowserModalProps) {
+  const { t } = useTranslation();
+  const [file, setFile] = useState<string | undefined>(undefined);
+  const [categoryQuery, setCategoryQuery] = useState('');
+  const [activeCode, setActiveCode] = useState<string | undefined>(undefined);
+  const [entryQuery, setEntryQuery] = useState('');
+  const [entryFilter, setEntryFilter] = useState('');
+  const [entryPage, setEntryPage] = useState(1);
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const knownRef = useRef<Set<string>>(new Set());
+  const seededFilesRef = useRef<Set<string>>(new Set());
+
+  const filesQuery = useGeodataFiles(open);
+  const files = useMemo(() => databasesFor(filesQuery.data ?? [], kind), [filesQuery.data, kind]);
+  const activeFile = files.find((candidate) => candidate.name === file);
+  const fileKind: GeoKind = activeFile?.kind ?? kind;
+
+  const categoriesQuery = useGeodataCategories(file, '', open && !!file);
+  // While a newly picked database loads, the query still serves the previous
+  // one's categories; seeding or filtering against those would attribute one
+  // database's codes to another.
+  const categoriesLoaded = !categoriesQuery.isPlaceholderData && !categoriesQuery.isLoading;
+  const categories = useMemo(
+    () => (categoriesLoaded ? (categoriesQuery.data?.items ?? []) : []),
+    [categoriesLoaded, categoriesQuery.data],
+  );
+
+  // Only the settled filter reaches the query key: every request rescans the
+  // whole .dat file server-side, so a per-keystroke fetch would be one full
+  // scan per character while the box itself stays instant.
+  const entriesQuery = useGeodataEntries(
+    file,
+    activeCode,
+    entryFilter,
+    (entryPage - 1) * ENTRY_PAGE_SIZE,
+    ENTRY_PAGE_SIZE,
+    open && !!file && !!activeCode,
+  );
+
+  // Resets clear both halves at once so a switch of database or category never
+  // renders with the previous filter still in the key, which would fire the
+  // very request the debounce exists to avoid.
+  const clearEntryFilter = useCallback(() => {
+    setEntryQuery('');
+    setEntryFilter('');
+    setEntryPage(1);
+  }, []);
+
+  useEffect(() => {
+    if (entryQuery === entryFilter) return;
+    const handle = window.setTimeout(() => {
+      setEntryFilter(entryQuery);
+      setEntryPage(1);
+    }, ENTRY_FILTER_DELAY);
+    return () => window.clearTimeout(handle);
+  }, [entryQuery, entryFilter]);
+
+  useEffect(() => {
+    if (!open) return;
+    knownRef.current = new Set();
+    seededFilesRef.current = new Set();
+    setCategoryQuery('');
+    setEntryQuery('');
+    setEntryFilter('');
+    setActiveCode(undefined);
+    setEntryPage(1);
+    setSelected([]);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open || file || files.length === 0) return;
+    setFile(preferredFile(files, kind));
+  }, [open, file, files, kind]);
+
+  useEffect(() => {
+    if (!open || !file || categories.length === 0 || seededFilesRef.current.has(file)) return;
+    const tokens = categories.map((category) => tokenFor(file, category.code, fileKind));
+    for (const token of tokens) knownRef.current.add(token);
+    seededFilesRef.current.add(file);
+    const fromValue = selectionFromValue(value, new Set(tokens));
+    if (fromValue.length > 0) {
+      setSelected((previous) => [...previous, ...fromValue.filter((token) => !previous.includes(token))]);
+    }
+  }, [open, file, categories, fileKind, value]);
+
+  const visibleCategories = useMemo(() => {
+    const query = categoryQuery.trim().toLowerCase();
+    if (!query) return categories;
+    return categories.filter((category) => category.code.includes(query));
+  }, [categories, categoryQuery]);
+
+  // Comparisons run through the canonical form: a field may hold the long
+  // ext:geosite.dat:cn spelling or a different case, and those name the same
+  // category as the geosite:cn this modal generates.
+  const selectedCodes = useMemo(() => {
+    if (!file) return [];
+    const chosen = new Set(selected.map(canonicalToken));
+    return categories
+      .filter((category) => chosen.has(canonicalToken(tokenFor(file, category.code, fileKind))))
+      .map((category) => category.code);
+  }, [categories, file, fileKind, selected]);
+
+  const toggle = useCallback(
+    (codes: string[]) => {
+      if (!file) return;
+      const chosen = new Set(codes.map((code) => tokenFor(file, code, fileKind)));
+      const chosenCanonical = new Set([...chosen].map(canonicalToken));
+      // The table reports keys for the rows it currently shows, so a selection
+      // made before the search box was narrowed must survive untouched.
+      const shown = new Set(
+        visibleCategories.map((category) => canonicalToken(tokenFor(file, category.code, fileKind))),
+      );
+      setSelected((previous) => {
+        const kept = previous.filter((token) => {
+          const canonical = canonicalToken(token);
+          return !shown.has(canonical) || chosenCanonical.has(canonical);
+        });
+        const keptCanonical = new Set(kept.map(canonicalToken));
+        return [...kept, ...[...chosen].filter((token) => !keptCanonical.has(canonicalToken(token)))];
+      });
+    },
+    [visibleCategories, file, fileKind],
+  );
+
+  const categoryColumns: ColumnsType<GeoCategory> = useMemo(
+    () => [
+      {
+        title: t('pages.xray.geoBrowser.searchCategory'),
+        dataIndex: 'code',
+        render: (code: string, category: GeoCategory) => (
+          <span className="geo-category">
+            <span className="geo-code">{code}</span>
+            {category.attributes?.length > 0 && (
+              <span className="geo-attrs">
+                {category.attributes.map((attribute) => (
+                  <Tag key={attribute} bordered={false}>
+                    @{attribute}
+                  </Tag>
+                ))}
+              </span>
+            )}
+          </span>
+        ),
+      },
+      {
+        dataIndex: 'entries',
+        align: 'right',
+        width: 90,
+        render: (entries: number) => <span className="geo-count">{entries.toLocaleString()}</span>,
+      },
+    ],
+    [t],
+  );
+
+  const entryColumns: ColumnsType<GeoEntry> = useMemo(
+    () => [
+      {
+        dataIndex: 'kind',
+        width: 88,
+        render: (entryKind: string) => (
+          <Tag bordered={false} className={`geo-kind geo-kind-${entryKind}`}>
+            {entryKind}
+          </Tag>
+        ),
+      },
+      {
+        dataIndex: 'value',
+        render: (entryValue: string) => <span className="geo-entry-value">{entryValue}</span>,
+      },
+    ],
+    [],
+  );
+
+  const fileOptions = files.map((candidate) => ({
+    value: candidate.name,
+    label: candidate.error ? `${candidate.name} — ${describeFileError(candidate.error, t)}` : candidate.name,
+    disabled: !!candidate.error,
+  }));
+
+  const meta = activeFile
+    ? t('pages.xray.geoBrowser.fileMeta', {
+        count: activeFile.categories.toLocaleString(),
+        size: SizeFormatter.sizeFormat(activeFile.size),
+        date: new Date(activeFile.modifiedAt).toLocaleString(),
+      })
+    : '';
+
+  const entriesTotal = entriesQuery.data?.total ?? 0;
+  const activeCategory = categories.find((category) => category.code === activeCode);
+  const countLabel = activeCategory
+    ? t(fileKind === 'ip' ? 'pages.xray.geoBrowser.subnetsCount' : 'pages.xray.geoBrowser.entriesCount', {
+        count: activeCategory.entries.toLocaleString(),
+      })
+    : '';
+
+  return (
+    <Modal
+      open={open}
+      title={t('pages.xray.geoBrowser.title')}
+      width={880}
+      onCancel={onClose}
+      onOk={() => onApply(mergeSelection(value, selected, knownRef.current))}
+      okText={t('pages.xray.geoBrowser.apply')}
+      cancelText={t('close')}
+      className="geo-browser-modal"
+    >
+      {filesQuery.isError && <Alert type="error" showIcon title={t('pages.xray.geoBrowser.loadFailed')} className="mb-12" />}
+
+      {!filesQuery.isError && !filesQuery.isLoading && files.length === 0 ? (
+        <Empty
+          description={
+            <span>
+              {t('pages.xray.geoBrowser.noFiles')}
+              <br />
+              <Typography.Text type="secondary">{t('pages.xray.geoBrowser.noFilesHint')}</Typography.Text>
+            </span>
+          }
+        />
+      ) : (
+        <>
+          <div className="geo-toolbar">
+            <Select
+              value={file}
+              options={fileOptions}
+              onChange={(next) => {
+                setFile(next);
+                setActiveCode(undefined);
+                setCategoryQuery('');
+                clearEntryFilter();
+              }}
+              style={{ minWidth: 200 }}
+              aria-label={t('pages.xray.geoBrowser.database')}
+            />
+            <Input.Search
+              value={categoryQuery}
+              onChange={(event) => setCategoryQuery(event.target.value)}
+              placeholder={t('pages.xray.geoBrowser.searchCategory')}
+              allowClear
+            />
+            <Button
+              onClick={() => toggle([...new Set([...selectedCodes, ...visibleCategories.map((c) => c.code)])])}
+              disabled={visibleCategories.length === 0}
+            >
+              {`${t('pages.xray.geoBrowser.selectFound')} (${visibleCategories.length.toLocaleString()})`}
+            </Button>
+            <span className="geo-meta">{meta}</span>
+          </div>
+
+          <div className="geo-columns">
+            <div className="geo-panel geo-categories">
+              <Table
+                size="small"
+                virtual
+                showHeader={false}
+                rowKey="code"
+                columns={categoryColumns}
+                dataSource={visibleCategories}
+                loading={filesQuery.isLoading || categoriesQuery.isLoading || categoriesQuery.isPlaceholderData}
+                pagination={false}
+                scroll={{ y: CATEGORY_SCROLL_HEIGHT }}
+                locale={{ emptyText: t('pages.xray.geoBrowser.noMatches') }}
+                rowSelection={{
+                  columnWidth: 42,
+                  preserveSelectedRowKeys: true,
+                  selectedRowKeys: selectedCodes,
+                  onChange: (keys) => toggle(keys as string[]),
+                }}
+                onRow={(category) => ({
+                  onClick: (event) => {
+                    if ((event.target as HTMLElement).closest('.ant-table-selection-column')) return;
+                    setActiveCode(category.code);
+                    clearEntryFilter();
+                  },
+                })}
+                rowClassName={(category) => (category.code === activeCode ? 'geo-row-active' : '')}
+              />
+            </div>
+
+            <div className="geo-panel geo-preview">
+              {activeCode ? (
+                <>
+                  <div className="geo-preview-head">
+                    <Tooltip title={file ? tokenFor(file, activeCode, fileKind) : activeCode}>
+                      <span className="geo-preview-title">{activeCode}</span>
+                    </Tooltip>
+                    <Typography.Text type="secondary">{countLabel}</Typography.Text>
+                    <Input
+                      value={entryQuery}
+                      onChange={(event) => setEntryQuery(event.target.value)}
+                      placeholder={t('pages.xray.geoBrowser.searchEntries')}
+                      allowClear
+                      className="geo-entry-filter"
+                    />
+                  </div>
+                  <div className="geo-preview-body">
+                    <Table
+                      size="small"
+                      showHeader={false}
+                      rowKey={(entry, index) => `${entry.value}-${index}`}
+                      columns={entryColumns}
+                      dataSource={entriesQuery.data?.items ?? []}
+                      loading={entriesQuery.isLoading}
+                      locale={{
+                        emptyText: entriesQuery.isError
+                          ? t('pages.xray.geoBrowser.loadFailed')
+                          : t('pages.xray.geoBrowser.noMatches'),
+                      }}
+                      pagination={false}
+                    />
+                  </div>
+                  <div className="geo-pager">
+                    <Pagination
+                      current={entryPage}
+                      pageSize={ENTRY_PAGE_SIZE}
+                      total={entriesTotal}
+                      size="small"
+                      showSizeChanger={false}
+                      onChange={setEntryPage}
+                      showTotal={(total, range) =>
+                        t('pages.xray.geoBrowser.shownRange', {
+                          from: range[0].toLocaleString(),
+                          to: range[1].toLocaleString(),
+                          total: total.toLocaleString(),
+                        })
+                      }
+                    />
+                  </div>
+                </>
+              ) : (
+                <div className="geo-placeholder">
+                  <Typography.Text type="secondary">{t('pages.xray.geoBrowser.pickCategory')}</Typography.Text>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="geo-footer">
+            {selected.length === 0 ? (
+              <Typography.Text type="secondary">{t('pages.xray.geoBrowser.emptySelection')}</Typography.Text>
+            ) : (
+              <>
+                <Space size={4} wrap className="geo-chips">
+                  {selected.map((token) => (
+                    <Tag
+                      key={token}
+                      closable
+                      color="processing"
+                      onClose={() => setSelected((previous) => previous.filter((item) => item !== token))}
+                    >
+                      {token}
+                    </Tag>
+                  ))}
+                </Space>
+                <span className="geo-selected-count">
+                  {t('pages.xray.geoBrowser.selected', { count: selected.length })}
+                </span>
+                <Button type="link" size="small" onClick={() => setSelected([])}>
+                  {t('pages.xray.geoBrowser.clearAll')}
+                </Button>
+              </>
+            )}
+          </div>
+        </>
+      )}
+    </Modal>
+  );
+}
+
+function describeFileError(error: string, t: (key: string) => string): string {
+  if (error.includes('too large')) return t('pages.xray.geoBrowser.tooLarge');
+  return t('pages.xray.geoBrowser.parseFailed');
+}
@@ -0,0 +1,247 @@
+import { useEffect, useState, type ReactNode } from 'react';
+import type { Decorator, Meta, StoryObj } from '@storybook/react-vite';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { expect, within } from 'storybook/test';
+import { Space } from 'antd';
+
+import { parseTokens } from '@/lib/xray/geoTokens';
+import type { GeoCategory, GeoEntry, GeoFile, GeodataTokenIssue } from '@/generated/types';
+
+import GeoTokenInput, { type GeoTokenInputProps } from './GeoTokenInput';
+
+type GeoResponder = (query: URLSearchParams, body: URLSearchParams) => unknown;
+type GeoRoutes = Record<string, GeoResponder>;
+
+const realFetch = window.fetch.bind(window);
+let activeRoutes: GeoRoutes = {};
+
+function requestUrl(input: RequestInfo | URL): URL {
+  if (typeof input === 'string') return new URL(input, window.location.origin);
+  if (input instanceof URL) return input;
+  return new URL(input.url, window.location.origin);
+}
+
+function geoFetch(input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+  const url = requestUrl(input);
+  const responder = activeRoutes[url.pathname];
+  if (!responder) return realFetch(input, init);
+  const form = new URLSearchParams(typeof init?.body === 'string' ? init.body : '');
+  const body = JSON.stringify({ success: true, msg: '', obj: responder(url.searchParams, form) });
+  return Promise.resolve(
+    new Response(body, { status: 200, headers: { 'content-type': 'application/json' } }),
+  );
+}
+
+function activate(routes: GeoRoutes): void {
+  activeRoutes = routes;
+  window.fetch = geoFetch;
+}
+
+function deactivate(routes: GeoRoutes): void {
+  if (activeRoutes === routes) activeRoutes = {};
+}
+
+function GeoApi({ routes, children }: { routes: GeoRoutes; children: ReactNode }) {
+  const [client] = useState(() => {
+    activate(routes);
+    return new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  });
+  useEffect(() => {
+    activate(routes);
+    return () => deactivate(routes);
+  }, [routes]);
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
+
+const domain = (value: string): GeoEntry => ({ kind: 'domain', value });
+const cidr = (value: string): GeoEntry => ({ kind: 'cidr', value });
+
+const SITE_ENTRIES: Record<string, GeoEntry[]> = {
+  'category-ads-all': [
+    domain('doubleclick.net'), domain('googleadservices.com'), domain('googlesyndication.com'),
+    domain('criteo.com'), domain('taboola.com'), domain('outbrain.com'),
+  ],
+  cn: [domain('baidu.com'), domain('qq.com'), domain('taobao.com'), domain('weibo.com'), domain('bilibili.com')],
+  google: [
+    domain('google.com'), domain('googleapis.com'), domain('gstatic.com'),
+    domain('googleusercontent.com'), domain('ggpht.com'), domain('android.com'),
+  ],
+  netflix: [domain('netflix.com'), domain('nflximg.net'), domain('nflxvideo.net'), domain('fast.com')],
+  telegram: [domain('telegram.org'), domain('t.me'), domain('telesco.pe'), domain('telegra.ph')],
+  youtube: [domain('youtube.com'), domain('youtu.be'), domain('ytimg.com'), domain('googlevideo.com')],
+};
+
+const IP_ENTRIES: Record<string, GeoEntry[]> = {
+  cloudflare: ['104.16.0.0/13', '172.64.0.0/13', '2606:4700::/32'].map(cidr),
+  cn: ['1.0.1.0/24', '36.0.0.0/22', '116.0.0.0/9', '2408:8000::/20'].map(cidr),
+  private: [
+    '10.0.0.0/8', '127.0.0.0/8', '169.254.0.0/16', '172.16.0.0/12', '192.168.0.0/16',
+    '::1/128', 'fc00::/7', 'fe80::/10',
+  ].map(cidr),
+  telegram: ['91.108.4.0/22', '149.154.160.0/20', '2001:b28:f23d::/48'].map(cidr),
+};
+
+const SITE_ATTRIBUTES: Record<string, string[]> = {
+  google: ['ads', 'cn'],
+  youtube: ['ads'],
+};
+
+function categoriesOf(
+  entries: Record<string, GeoEntry[]>,
+  attributes: Record<string, string[]> = {},
+): GeoCategory[] {
+  return Object.keys(entries)
+    .sort()
+    .map((code) => ({ code, entries: entries[code].length, attributes: attributes[code] ?? [] }));
+}
+
+const DATASETS: Record<string, { categories: GeoCategory[]; entries: Record<string, GeoEntry[]> }> = {
+  'geosite.dat': { categories: categoriesOf(SITE_ENTRIES, SITE_ATTRIBUTES), entries: SITE_ENTRIES },
+  'geoip.dat': { categories: categoriesOf(IP_ENTRIES), entries: IP_ENTRIES },
+};
+
+const UPDATED_AT = Date.UTC(2026, 6, 24, 3, 12);
+
+const FILES: GeoFile[] = [
+  {
+    name: 'geosite.dat',
+    kind: 'site',
+    size: 4_812_544,
+    modifiedAt: UPDATED_AT,
+    categories: DATASETS['geosite.dat'].categories.length,
+  },
+  {
+    name: 'geoip.dat',
+    kind: 'ip',
+    size: 8_694_272,
+    modifiedAt: UPDATED_AT,
+    categories: DATASETS['geoip.dat'].categories.length,
+  },
+];
+
+function referenceOf(token: string, isIP: boolean): { file: string; code: string } | null {
+  const [prefix, ...rest] = token.split(':');
+  const code = (value: string) => value.split('@')[0].toLowerCase();
+  if (prefix === 'geosite') return { file: 'geosite.dat', code: code(rest.join(':')) };
+  if (prefix === 'geoip') return { file: 'geoip.dat', code: code(rest.join(':')) };
+  if (prefix === 'ext') return { file: rest[0] ?? '', code: code(rest.slice(1).join(':')) };
+  return isIP && prefix === 'ext-ip' ? { file: rest[0] ?? '', code: code(rest.slice(1).join(':')) } : null;
+}
+
+function validate(tokens: string[], isIP: boolean): GeodataTokenIssue[] {
+  const issues: GeodataTokenIssue[] = [];
+  for (const token of tokens) {
+    const reference = referenceOf(token, isIP);
+    if (!reference) continue;
+    const dataset = DATASETS[reference.file];
+    if (!dataset) {
+      issues.push({ token, reason: 'fileMissing', file: reference.file, code: reference.code });
+      continue;
+    }
+    if (!dataset.categories.some((category) => category.code === reference.code)) {
+      issues.push({ token, reason: 'categoryMissing', file: reference.file, code: reference.code });
+    }
+  }
+  return issues;
+}
+
+const routes: GeoRoutes = {
+  '/csrf-token': () => 'storybook-csrf-token',
+  '/panel/api/xray/geodata/files': () => FILES,
+  '/panel/api/xray/geodata/categories': (query) => {
+    const dataset = DATASETS[query.get('file') ?? ''];
+    const needle = (query.get('q') ?? '').trim().toLowerCase();
+    const items = (dataset?.categories ?? []).filter((category) => category.code.includes(needle));
+    return { total: items.length, items };
+  },
+  '/panel/api/xray/geodata/entries': (query) => {
+    const dataset = DATASETS[query.get('file') ?? ''];
+    const needle = (query.get('q') ?? '').trim().toLowerCase();
+    const matched = (dataset?.entries[query.get('code') ?? ''] ?? []).filter((entry) =>
+      entry.value.toLowerCase().includes(needle),
+    );
+    const offset = Number(query.get('offset') ?? 0);
+    const limit = Number(query.get('limit') ?? 100);
+    return { total: matched.length, items: matched.slice(offset, offset + limit) };
+  },
+  '/panel/api/xray/geodata/validate': (_query, form) =>
+    validate(parseTokens(form.get('tokens') ?? ''), form.get('kind') === 'ip'),
+};
+
+const withGeodata: Decorator = function GeodataBackend(Story) {
+  return (
+    <GeoApi routes={routes}>
+      <Story />
+    </GeoApi>
+  );
+};
+
+function ControlledTokenInput({ value = '', id = 'geo-rule', ...rest }: GeoTokenInputProps) {
+  const [current, setCurrent] = useState(value);
+  useEffect(() => setCurrent(value), [value]);
+  return (
+    <Space direction="vertical" size={4} style={{ width: 460 }}>
+      <label htmlFor={id}>{rest.kind === 'ip' ? 'Target IP' : 'Target domain'}</label>
+      <GeoTokenInput {...rest} id={id} value={current} onChange={setCurrent} />
+    </Space>
+  );
+}
+
+const meta = {
+  title: 'Geodata/GeoTokenInput',
+  component: GeoTokenInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+    docs: {
+      description: {
+        component:
+          'Routing rule field for the xray rule editor: a comma separated list of domains/CIDRs and `geosite:` / `geoip:` tokens, with a database button in the addon that opens the geo category browser. Typed tokens are validated against the databases on disk after a short pause, and anything the running core would not resolve is called out under the field. The stories answer `/panel/api/xray/geodata/*` from an in-memory fixture, so validation and the browser both work without a panel backend.',
+      },
+    },
+  },
+  decorators: [withGeodata],
+  args: { kind: 'domain' },
+  argTypes: {
+    value: { description: 'Comma separated rule string held by the parent form.' },
+    onChange: { description: 'Called with the full rule string on every edit and on Apply from the browser.' },
+    onBlur: { description: 'Forwarded to the input; used by React Hook Form to mark the field touched.' },
+    kind: {
+      description: 'Which database the tokens are validated against: `domain` for geosite, `ip` for geoip.',
+      control: 'inline-radio',
+      options: ['domain', 'ip'],
+    },
+    placeholder: { description: 'Placeholder shown while the field is empty.' },
+    id: { description: 'Input id, linked to the label rendered by the surrounding form field.' },
+  },
+  render: (args) => <ControlledTokenInput {...args} />,
+} satisfies Meta<typeof GeoTokenInput>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+  args: { kind: 'domain', value: '', placeholder: 'geosite:google, example.com' },
+};
+
+export const DomainTokens: Story = {
+  args: { kind: 'domain', value: 'geosite:google, google.com' },
+};
+
+export const IpTokens: Story = {
+  args: { kind: 'ip', value: 'geoip:private' },
+};
+
+export const UnknownCategory: Story = {
+  args: { kind: 'domain', value: 'geosite:blabla, geosite:google' },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText(/geosite:blabla/, undefined, { timeout: 3000 })).toBeVisible();
+  },
+};
@@ -0,0 +1,126 @@
+import { useEffect, useState } from 'react';
+import type { Ref } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Input, Tooltip, Typography } from 'antd';
+import type { InputRef } from 'antd';
+import { DatabaseOutlined } from '@ant-design/icons';
+
+import { useValidateGeoTokens, type GeoTokenKind } from '@/api/queries/useGeodata';
+import { parseTokens } from '@/lib/xray/geoTokens';
+import type { GeodataTokenIssue, GeoKind } from '@/generated/types';
+
+import GeoBrowserModal from './GeoBrowserModal';
+
+const VALIDATION_DELAY = 600;
+
+// Each reason needs its own wording: a missing database is fixed under Geodata,
+// a missing category by picking another one, and a bad token by editing it.
+const REASON_KEYS: Record<string, string> = {
+  fileMissing: 'pages.xray.geoBrowser.missingDatabase',
+  categoryMissing: 'pages.xray.geoBrowser.unknownCategories',
+  attributeMissing: 'pages.xray.geoBrowser.unknownAttribute',
+  syntax: 'pages.xray.geoBrowser.invalidToken',
+  wrongKind: 'pages.xray.geoBrowser.wrongKind',
+};
+
+export interface GeoTokenInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  onBlur?: () => void;
+  kind: GeoTokenKind;
+  placeholder?: string;
+  id?: string;
+  ref?: Ref<InputRef>;
+}
+
+export default function GeoTokenInput({ value = '', onChange, onBlur, kind, placeholder, id, ref }: GeoTokenInputProps) {
+  const { t } = useTranslation();
+  const [browsing, setBrowsing] = useState(false);
+  const [issues, setIssues] = useState<GeodataTokenIssue[]>([]);
+  const [checkFailed, setCheckFailed] = useState(false);
+  const validate = useValidateGeoTokens();
+  const { mutateAsync } = validate;
+
+  useEffect(() => {
+    const tokens = parseTokens(value);
+    if (tokens.length === 0) {
+      setIssues([]);
+      setCheckFailed(false);
+      return;
+    }
+    let cancelled = false;
+    const timer = setTimeout(() => {
+      mutateAsync({ tokens, kind })
+        .then((found) => {
+          if (cancelled) return;
+          setIssues(found);
+          setCheckFailed(false);
+        })
+        // A rejected check says nothing about the tokens, so the warnings are
+        // dropped but replaced by a notice — silence here reads as "all valid".
+        .catch(() => {
+          if (cancelled) return;
+          setIssues([]);
+          setCheckFailed(true);
+        });
+    }, VALIDATION_DELAY);
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+    };
+  }, [value, kind, mutateAsync]);
+
+  return (
+    <>
+      <Input
+        ref={ref}
+        id={id}
+        value={value}
+        placeholder={placeholder}
+        onChange={(event) => onChange?.(event.target.value)}
+        onBlur={onBlur}
+        addonAfter={
+          <Tooltip title={t('pages.xray.geoBrowser.openTooltip')}>
+            <Button
+              type="text"
+              size="small"
+              icon={<DatabaseOutlined />}
+              aria-label={t('pages.xray.geoBrowser.openTooltip')}
+              onClick={() => setBrowsing(true)}
+            />
+          </Tooltip>
+        }
+      />
+      {groupByReason(issues).map(([reason, tokens]) => (
+        <Typography.Text key={reason} type="warning" className="geo-unknown-hint">
+          {t(REASON_KEYS[reason] ?? REASON_KEYS.categoryMissing, { tokens: tokens.join(', ') })}
+        </Typography.Text>
+      ))}
+      {checkFailed && (
+        <Typography.Text type="secondary" className="geo-unknown-hint">
+          {t('pages.xray.geoBrowser.checkFailed')}
+        </Typography.Text>
+      )}
+      <GeoBrowserModal
+        open={browsing}
+        kind={(kind === 'ip' ? 'ip' : 'site') as GeoKind}
+        value={value}
+        onApply={(next) => {
+          onChange?.(next);
+          setBrowsing(false);
+        }}
+        onClose={() => setBrowsing(false)}
+      />
+    </>
+  );
+}
+
+function groupByReason(issues: GeodataTokenIssue[]): Array<[string, string[]]> {
+  const grouped = new Map<string, string[]>();
+  for (const issue of issues) {
+    const tokens = grouped.get(issue.reason) ?? [];
+    tokens.push(issue.token);
+    grouped.set(issue.reason, tokens);
+  }
+  return [...grouped];
+}
@@ -0,0 +1,4 @@
+export { default as GeoBrowserModal } from './GeoBrowserModal';
+export type { GeoBrowserModalProps } from './GeoBrowserModal';
+export { default as GeoTokenInput } from './GeoTokenInput';
+export type { GeoTokenInputProps } from './GeoTokenInput';