feat: Add outbound egress metadata (IP + country) (#5886)

* Add outbound egress metadata

Show egress IP and country information for outbound HTTP tests. The probe reuses the temporary SOCKS route from the existing HTTP test and fetches Cloudflare trace metadata after the reachability check succeeds.

The outbound list now adds separate Egress and Country columns, hides egress IPs until the user reveals them, and marks Cloudflare WARP results with an orange cloud pill. Mobile cards keep the same data compact by placing the country and IPv4/IPv6 values on separate lines.

Validation: npm run typecheck; npm run lint; npm run build; go test ./internal/web/service/outbound

* Use context-aware DNS lookup for egress trace

* Address outbound egress review feedback

Restore the Real Delay selector and TCP default so the egress metadata change does not remove an existing test mode.

Keep HTTP probe tests hermetic by stubbing egress trace lookups, run IPv4 and IPv6 trace fetches concurrently with a shorter diagnostic timeout, scope mobile IP reveal state per row, support keyboard activation for reveal toggles, and treat WARP+ trace values as WARP-like.

frontend/src/pages/xray/outbounds/CountryPill.tsx

@@ -0,0 +1,18 @@
+import { CloudOutlined } from '@ant-design/icons';
+
+interface CountryPillProps {
+  flag: string;
+  name: string;
+  warp?: string;
+}
+
+export default function CountryPill({ flag, name, warp }: CountryPillProps) {
+  const isWarp = !!warp && warp.toLowerCase() !== 'off';
+  return (
+    <span className={isWarp ? 'country-pill warp-on' : 'country-pill'}>
+      {isWarp && <CloudOutlined className="warp-cloud-icon" />}
+      {flag && <span>{flag}</span>}
+      <span>{name}</span>
+    </span>
+  );
+}

frontend/src/pages/xray/outbounds/OutboundCardList.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Tag, Tooltip } from 'antd';
 import {
@@ -9,15 +10,21 @@ import {
   ThunderboltOutlined,
   LoadingOutlined,
   ExportOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
 } from '@ant-design/icons';
 
 import { SizeFormatter } from '@/utils';
+import { activateOnKey } from '@/utils/a11y';
 import { OutboundProtocols as Protocols } from '@/schemas/primitives';
 import type { OutboundTestMode, OutboundTestState, OutboundTrafficRow } from '@/hooks/useXraySetting';
 
 import type { OutboundRow } from './outbounds-tab-types';
+import CountryPill from './CountryPill';
 import TestResultPopover from './TestResultPopover';
 import {
+  countryFlag,
+  countryName,
   isTesting,
   isUntestable,
   outboundAddresses,
@@ -49,7 +56,55 @@ export default function OutboundCardList({
   confirmDelete,
   onTest,
 }: OutboundCardListProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const [showEgressIp, setShowEgressIp] = useState<Record<string, boolean>>({});
+
+  const setCardEgressVisible = (key: string, visible: boolean) => {
+    setShowEgressIp((prev) => ({ ...prev, [key]: visible }));
+  };
+
+  const renderEgress = (index: number, rowKey: string) => {
+    const result = testResult(outboundTestStates, index);
+    const egress = result?.egress;
+    const isEgressVisible = !!showEgressIp[rowKey];
+    const flag = countryFlag(egress?.country);
+    const name = countryName(egress?.country, i18n.language);
+    const addresses = [
+      egress?.ipv4 ? { label: 'v4', value: egress.ipv4 } : null,
+      egress?.ipv6 ? { label: 'v6', value: egress.ipv6 } : null,
+    ].filter((item): item is { label: string; value: string } => Boolean(item));
+
+    if (!egress || (addresses.length === 0 && !egress.country)) {
+      return null;
+    }
+
+    return (
+      <div className="card-egress">
+        <div className="card-egress-row">
+          <span>{t('pages.xray.outbound.egress')}:</span>
+          <Tooltip title={t('pages.index.toggleIpVisibility')}>
+            {isEgressVisible ? (
+              <EyeOutlined className="ip-toggle-icon" role="button" tabIndex={0} aria-label={t('pages.index.toggleIpVisibility')} onClick={() => setCardEgressVisible(rowKey, false)} onKeyDown={activateOnKey(() => setCardEgressVisible(rowKey, false))} />
+            ) : (
+              <EyeInvisibleOutlined className="ip-toggle-icon" role="button" tabIndex={0} aria-label={t('pages.index.toggleIpVisibility')} onClick={() => setCardEgressVisible(rowKey, true)} onKeyDown={activateOnKey(() => setCardEgressVisible(rowKey, true))} />
+            )}
+          </Tooltip>
+          {egress.country && (
+            <CountryPill flag={flag} name={name || egress.country} warp={egress.warp} />
+          )}
+        </div>
+        {addresses.map((addr) => (
+          <Tooltip key={addr.label} title={addr.value}>
+            <div className="card-egress-row">
+              <span className="egress-family">{addr.label}:</span>
+              <span className={isEgressVisible ? 'address-visible egress-ip' : 'address-hidden egress-ip'}>{addr.value}</span>
+            </div>
+          </Tooltip>
+        ))}
+      </div>
+    );
+  };
+
   if (rows.length === 0) {
     return (
       <div className="card-empty">
@@ -101,6 +156,7 @@ export default function OutboundCardList({
               ))}
             </div>
           )}
+          {renderEgress(index, String(record.key))}
           <div className="card-foot">
             <span className="traffic-up">↑ {SizeFormatter.sizeFormat(trafficFor(outboundsTraffic, record).up)}</span>
             <span className="traffic-sep" />

frontend/src/pages/xray/outbounds/OutboundsTab.css

@@ -75,6 +75,81 @@
   background: var(--ant-color-fill-tertiary);
 }
 
+.egress-header {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.egress-ip {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+}
+
+.egress-stack {
+  display: inline-flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.egress-address {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.egress-family {
+  color: var(--ant-color-text-secondary);
+  font-size: 10px;
+  text-transform: uppercase;
+}
+
+.country-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--ant-color-border);
+  border-radius: 4px;
+  padding: 1px 6px;
+  line-height: 20px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+
+.country-pill.warp-on {
+  border-color: #f48120;
+}
+
+.warp-cloud-icon {
+  width: 1em;
+  height: 1em;
+  color: #f48120;
+  flex: 0 0 auto;
+}
+
+.warp-cloud-icon svg {
+  fill: #f48120;
+}
+
+.ip-toggle-icon {
+  cursor: pointer;
+  opacity: 0.65;
+}
+
+.ip-toggle-icon:hover {
+  opacity: 1;
+}
+
+.address-hidden {
+  filter: blur(5px);
+  transition: filter 0.2s ease;
+}
+
+.address-visible {
+  filter: none;
+}
+
 .action-cell {
   display: flex;
   align-items: center;
@@ -110,6 +185,23 @@
   flex-wrap: wrap;
 }
 
+.card-egress {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 3px;
+  font-size: 12px;
+  opacity: 0.85;
+}
+
+.card-egress-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+}
+
 .card-test {
   margin-left: auto;
   display: inline-flex;

frontend/src/pages/xray/outbounds/outbounds-tab-helpers.ts

@@ -61,6 +61,22 @@ export function trafficFor(outboundsTraffic: OutboundTrafficRow[], o: OutboundRo
   return { up: tr?.up || 0, down: tr?.down || 0 };
 }
 
+export function countryFlag(country?: string): string {
+  const code = (country || '').trim().toUpperCase();
+  if (!/^[A-Z]{2}$/.test(code)) return '';
+  return String.fromCodePoint(...[...code].map((ch) => 0x1f1e6 + ch.charCodeAt(0) - 65));
+}
+
+export function countryName(country?: string, locale?: string): string {
+  const code = (country || '').trim().toUpperCase();
+  if (!/^[A-Z]{2}$/.test(code)) return '';
+  try {
+    return new Intl.DisplayNames(locale ? [locale] : undefined, { type: 'region' }).of(code) || code;
+  } catch {
+    return code;
+  }
+}
+
 export function isTesting<K extends string | number>(states: Record<K, OutboundTestState>, idx: K): boolean {
   return !!states?.[idx]?.testing;
 }

frontend/src/pages/xray/outbounds/useOutboundColumns.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Dropdown, Tag, Tooltip } from 'antd';
 import {
@@ -11,17 +11,23 @@ import {
   LoadingOutlined,
   ArrowUpOutlined,
   ArrowDownOutlined,
+  EyeInvisibleOutlined,
+  EyeOutlined,
 } from '@ant-design/icons';
 import type { ColumnsType } from 'antd/es/table';
 
 import { SizeFormatter } from '@/utils';
+import { activateOnKey } from '@/utils/a11y';
 import { OutboundProtocols as Protocols } from '@/schemas/primitives';
 import type { OutboundTestMode, OutboundTestState, OutboundTrafficRow } from '@/hooks/useXraySetting';
 
 import type { OutboundRow } from './outbounds-tab-types';
+import CountryPill from './CountryPill';
 import TestResultPopover from './TestResultPopover';
 import {
   effectiveTestMode,
+  countryFlag,
+  countryName,
   isTesting,
   isUntestable,
   outboundAddresses,
@@ -58,7 +64,8 @@ export function useOutboundColumns({
   onResetTraffic,
   onTest,
 }: OutboundColumnsParams): ColumnsType<OutboundRow> {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const [showEgressIp, setShowEgressIp] = useState(false);
   return useMemo(
     () => [
       {
@@ -135,6 +142,72 @@ export function useOutboundColumns({
           );
         },
       },
+      {
+        title: (
+          <span className="egress-header">
+            {t('pages.xray.outbound.egress')}
+            <Tooltip title={t('pages.index.toggleIpVisibility')}>
+              {showEgressIp ? (
+                <EyeOutlined className="ip-toggle-icon" role="button" tabIndex={0} aria-label={t('pages.index.toggleIpVisibility')} onClick={() => setShowEgressIp(false)} onKeyDown={activateOnKey(() => setShowEgressIp(false))} />
+              ) : (
+                <EyeInvisibleOutlined className="ip-toggle-icon" role="button" tabIndex={0} aria-label={t('pages.index.toggleIpVisibility')} onClick={() => setShowEgressIp(true)} onKeyDown={activateOnKey(() => setShowEgressIp(true))} />
+              )}
+            </Tooltip>
+          </span>
+        ),
+        key: 'egress',
+        align: 'left',
+        width: 210,
+        render: (_v, _record, index) => {
+          const egress = testResult(outboundTestStates, index)?.egress;
+          const addresses = [
+            egress?.ipv4 ? { label: 'v4', value: egress.ipv4 } : null,
+            egress?.ipv6 ? { label: 'v6', value: egress.ipv6 } : null,
+          ].filter((item): item is { label: string; value: string } => Boolean(item));
+          if (addresses.length === 0) {
+            return (
+              <Tooltip title={t('pages.xray.outbound.egressHint')}>
+                <span className="empty">—</span>
+              </Tooltip>
+            );
+          }
+          return (
+            <div className="egress-stack">
+              {addresses.map((addr) => (
+                <Tooltip key={addr.label} title={addr.value}>
+                  <span className="egress-address">
+                    <span className="egress-family">{addr.label}</span>
+                    <span className={showEgressIp ? 'address-visible egress-ip' : 'address-hidden egress-ip'}>{addr.value}</span>
+                  </span>
+                </Tooltip>
+              ))}
+            </div>
+          );
+        },
+      },
+      {
+        title: t('pages.xray.outbound.country'),
+        key: 'egressCountry',
+        align: 'left',
+        width: 160,
+        render: (_v, _record, index) => {
+          const egress = testResult(outboundTestStates, index)?.egress;
+          if (!egress?.country) {
+            return (
+              <Tooltip title={t('pages.xray.outbound.egressHint')}>
+                <span className="empty">—</span>
+              </Tooltip>
+            );
+          }
+          const flag = countryFlag(egress.country);
+          const name = countryName(egress.country, i18n.language);
+          return (
+            <Tooltip title={egress.warp ? `Cloudflare trace · WARP ${egress.warp}` : 'Cloudflare trace'}>
+              <CountryPill flag={flag} name={name || egress.country} warp={egress.warp} />
+            </Tooltip>
+          );
+        },
+      },
       {
         title: t('pages.inbounds.traffic'),
         key: 'traffic',
@@ -183,6 +256,6 @@ export function useOutboundColumns({
       },
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [t, testMode, rows, outboundTestStates, outboundsTraffic],
+    [t, i18n.language, testMode, rows, outboundTestStates, outboundsTraffic, showEgressIp],
   );
 }

frontend/src/schemas/xray.ts

@@ -78,6 +78,15 @@ export const OutboundTestResultSchema = z.object({
       }).loose(),
     )
     .optional(),
+  egress: z
+    .object({
+      ipv4: z.string().optional(),
+      ipv6: z.string().optional(),
+      country: z.string().optional(),
+      warp: z.string().optional(),
+    })
+    .loose()
+    .optional(),
 }).loose();
 
 // Batch results from /xray/testOutbounds, aligned with the request order.