From a31a42fcc50b910222e5339ae3d5aa6fc12720a8 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 14:44:46 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20Phase=206-vi=20=E2=80=94=20WA?=
 =?UTF-8?q?RP=20+=20NordVPN=20provisioning=20modals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the toast stubs on the Basics tab and Outbounds toolbar
with the legacy WARP + NordVPN provisioning flows. Both modals now
stage their wireguard outbounds back into templateSettings.outbounds
through the same event channels OutboundsTab uses, so the existing
add / reset / delete / refresh-traffic surface keeps working.

- WarpModal.vue: empty state shows a single Create button that
  generates a wireguard keypair locally (Wireguard.generateKeypair)
  and posts it to /panel/xray/warp/reg; populated state surfaces
  the access_token / device_id / license_key / private_key, lets
  the user upgrade to WARP+ via /panel/xray/warp/license, refreshes
  the account info from /panel/xray/warp/config (plan / quota /
  usage in human-readable bytes), and stages a wireguard outbound
  with the WARP-specific reserved-byte encoding pulled from
  client_id. Add / Reset / Delete go through events the parent
  routes back to templateSettings.outbounds.
- NordModal.vue: dual-tab login (NordVPN access token →
  /panel/xray/nord/reg, or paste a NordLynx private key →
  /panel/xray/nord/setKey). Once authenticated, country / city /
  server selectors fetch from /panel/xray/nord/{countries,servers},
  servers sort by load ascending, the lowest-load server in the
  current city auto-selects. Reset emits oldTag/newTag so the
  parent renames matching routing rules in place; logout emits a
  remove-routing-rules event with prefix `nord-` to purge any
  dangling references.
- XrayPage.vue: holds warpOpen / nordOpen flags, ensures the
  outbounds array exists before mutating it, and wires the modal
  events (add-outbound / reset-outbound / remove-outbound /
  remove-routing-rules) to in-place edits of templateSettings.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/xray/NordModal.vue | 395 ++++++++++++++++++++++++++
 frontend/src/pages/xray/WarpModal.vue | 343 ++++++++++++++++++++++
 frontend/src/pages/xray/XrayPage.vue  |  75 ++++-
 3 files changed, 810 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/xray/NordModal.vue
 create mode 100644 frontend/src/pages/xray/WarpModal.vue

diff --git a/frontend/src/pages/xray/NordModal.vue b/frontend/src/pages/xray/NordModal.vue
new file mode 100644
index 00000000..2a1bde8c
--- /dev/null
+++ b/frontend/src/pages/xray/NordModal.vue
@@ -0,0 +1,395 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { LoginOutlined, SaveOutlined } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
+
+import { HttpUtil } from '@/utils';
+
+// NordVPN provisioning modal — mirrors the legacy nord_modal.
+//
+// Login routes:
+//   • access token (NordVPN account) → /panel/xray/nord/reg
+//   • manual private key (existing wireguard key from NordLynx) →
+//     /panel/xray/nord/setKey
+// Once authenticated, the country / city / server selectors fetch
+// from /panel/xray/nord/{countries,servers}, and the user can stage
+// a wireguard outbound (tag `nord-<hostname>`) for the parent's
+// outbound list.
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  templateSettings: { type: Object, default: null },
+});
+
+const emit = defineEmits([
+  'update:open',
+  'add-outbound',
+  'reset-outbound',
+  'remove-outbound',
+  // Routing rules referencing the deleted nord-* outbound need the
+  // parent to clean them up — we emit, the parent purges.
+  'remove-routing-rules',
+]);
+
+const loading = ref(false);
+const nordData = ref(null);
+const token = ref('');
+const manualKey = ref('');
+
+const countries = ref([]);
+const cities = ref([]);
+const servers = ref([]);
+const countryId = ref(null);
+const cityId = ref(null);
+const serverId = ref(null);
+
+const nordOutboundIndex = computed(() => {
+  const list = props.templateSettings?.outbounds;
+  if (!list) return -1;
+  return list.findIndex((o) => o?.tag?.startsWith?.('nord-'));
+});
+
+const filteredServers = computed(() => {
+  if (!cityId.value) return servers.value;
+  return servers.value.filter((s) => s.cityId === cityId.value);
+});
+
+watch(() => props.open, (next) => {
+  if (next) fetchData();
+});
+
+watch(() => filteredServers.value, (list) => {
+  // Auto-select the first server in the visible list (lowest load
+  // because servers were sorted ascending by load on fetch).
+  serverId.value = list.length > 0 ? list[0].id : null;
+});
+
+// === API actions ====================================================
+async function fetchData() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/nord/data');
+    if (msg?.success) {
+      nordData.value = msg.obj ? JSON.parse(msg.obj) : null;
+      if (nordData.value) await fetchCountries();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function login() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/nord/reg', { token: token.value });
+    if (msg?.success) {
+      nordData.value = JSON.parse(msg.obj);
+      await fetchCountries();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function saveKey() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/nord/setKey', { key: manualKey.value });
+    if (msg?.success) {
+      nordData.value = JSON.parse(msg.obj);
+      await fetchCountries();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function logout() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/nord/del');
+    if (msg?.success) {
+      // Clean up the staged outbound + matching routing rules first
+      // so a re-login doesn't carry stale references.
+      emit('remove-outbound', nordOutboundIndex.value);
+      emit('remove-routing-rules', { prefix: 'nord-' });
+      nordData.value = null;
+      token.value = '';
+      manualKey.value = '';
+      countries.value = [];
+      cities.value = [];
+      servers.value = [];
+      countryId.value = null;
+      cityId.value = null;
+      serverId.value = null;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function fetchCountries() {
+  const msg = await HttpUtil.post('/panel/xray/nord/countries');
+  if (msg?.success) countries.value = JSON.parse(msg.obj);
+}
+
+async function fetchServers() {
+  if (!countryId.value) return;
+  loading.value = true;
+  servers.value = [];
+  cities.value = [];
+  serverId.value = null;
+  cityId.value = null;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/nord/servers', { countryId: countryId.value });
+    if (!msg?.success) return;
+    const data = JSON.parse(msg.obj);
+    const locations = data.locations || [];
+    const locToCity = {};
+    const citiesMap = new Map();
+    for (const loc of locations) {
+      if (loc.country?.city) {
+        citiesMap.set(loc.country.city.id, loc.country.city);
+        locToCity[loc.id] = loc.country.city;
+      }
+    }
+    cities.value = Array.from(citiesMap.values()).sort((a, b) => a.name.localeCompare(b.name));
+
+    servers.value = (data.servers || [])
+      .map((s) => {
+        const firstLocId = (s.location_ids || [])[0];
+        const city = locToCity[firstLocId];
+        return { ...s, cityId: city?.id || null, cityName: city?.name || 'Unknown' };
+      })
+      .sort((a, b) => a.load - b.load);
+
+    if (servers.value.length === 0) {
+      message.warning('No servers found for the selected country');
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+// === Outbound staging ==============================================
+// NordVPN exposes its WireGuard public key via a "technologies"
+// array entry with id 35; the legacy modal pulls the key from the
+// metadata field of that entry. Same here.
+function buildNordOutbound() {
+  const server = servers.value.find((s) => s.id === serverId.value);
+  if (!server) return null;
+  const tech = server.technologies?.find((t) => t.id === 35);
+  const publicKey = tech?.metadata?.find((m) => m.name === 'public_key')?.value;
+  if (!publicKey) {
+    message.error('Selected server does not advertise a NordLynx public key.');
+    return null;
+  }
+  return {
+    tag: `nord-${server.hostname}`,
+    protocol: 'wireguard',
+    settings: {
+      secretKey: nordData.value.private_key,
+      address: ['10.5.0.2/32'],
+      peers: [{ publicKey, endpoint: `${server.station}:51820` }],
+      noKernelTun: false,
+    },
+  };
+}
+
+function addOutbound() {
+  const ob = buildNordOutbound();
+  if (!ob) return;
+  emit('add-outbound', ob);
+  message.success('NordVPN outbound added');
+  close();
+}
+
+function resetOutbound() {
+  if (nordOutboundIndex.value === -1) return;
+  const ob = buildNordOutbound();
+  if (!ob) return;
+  // Tag rename across routing.rules is the parent's job — pass
+  // both old and new tag in the payload.
+  const oldTag = props.templateSettings.outbounds[nordOutboundIndex.value]?.tag;
+  emit('reset-outbound', {
+    index: nordOutboundIndex.value,
+    outbound: ob,
+    oldTag,
+    newTag: ob.tag,
+  });
+  message.success('NordVPN outbound updated');
+  close();
+}
+
+function close() { emit('update:open', false); }
+</script>
+
+<template>
+  <a-modal
+    :open="open"
+    title="NordVPN NordLynx"
+    :footer="null"
+    :closable="true"
+    :mask-closable="true"
+    @cancel="close"
+  >
+    <!-- Not authenticated → tabbed login (token or manual key) -->
+    <template v-if="nordData == null">
+      <a-tabs default-active-key="token">
+        <a-tab-pane key="token" tab="Access token">
+          <a-form
+            :colon="false"
+            :label-col="{ md: { span: 6 } }"
+            :wrapper-col="{ md: { span: 18 } }"
+            class="mt-20"
+          >
+            <a-form-item label="Access token">
+              <a-input v-model:value="token" placeholder="Access token" />
+              <a-button type="primary" class="mt-10" :loading="loading" @click="login">
+                <template #icon><LoginOutlined /></template>
+                Login
+              </a-button>
+            </a-form-item>
+          </a-form>
+        </a-tab-pane>
+        <a-tab-pane key="key" tab="Private key">
+          <a-form
+            :colon="false"
+            :label-col="{ md: { span: 6 } }"
+            :wrapper-col="{ md: { span: 18 } }"
+            class="mt-20"
+          >
+            <a-form-item label="Private key">
+              <a-input v-model:value="manualKey" placeholder="Private key" />
+              <a-button type="primary" class="mt-10" :loading="loading" @click="saveKey">
+                <template #icon><SaveOutlined /></template>
+                Save
+              </a-button>
+            </a-form-item>
+          </a-form>
+        </a-tab-pane>
+      </a-tabs>
+    </template>
+
+    <!-- Authenticated → server picker + outbound controls -->
+    <template v-else>
+      <table class="nord-data-table">
+        <tbody>
+          <tr v-if="nordData.token" class="row-odd">
+            <td>Access token</td>
+            <td>{{ nordData.token }}</td>
+          </tr>
+          <tr>
+            <td>Private key</td>
+            <td>{{ nordData.private_key }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <a-button :loading="loading" type="primary" danger class="mt-8" @click="logout">Logout</a-button>
+
+      <a-divider class="zero-margin">Settings</a-divider>
+
+      <a-form
+        :colon="false"
+        :label-col="{ md: { span: 6 } }"
+        :wrapper-col="{ md: { span: 18 } }"
+        class="mt-10"
+      >
+        <a-form-item label="Country">
+          <a-select
+            v-model:value="countryId"
+            show-search
+            option-filter-prop="label"
+            @change="fetchServers"
+          >
+            <a-select-option
+              v-for="c in countries"
+              :key="c.id"
+              :value="c.id"
+              :label="c.name"
+            >
+              {{ c.name }} ({{ c.code }})
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item v-if="cities.length > 0" label="City">
+          <a-select
+            v-model:value="cityId"
+            show-search
+            option-filter-prop="label"
+          >
+            <a-select-option :value="null" label="All cities">All cities</a-select-option>
+            <a-select-option
+              v-for="c in cities"
+              :key="c.id"
+              :value="c.id"
+              :label="c.name"
+            >{{ c.name }}</a-select-option>
+          </a-select>
+        </a-form-item>
+
+        <a-form-item v-if="filteredServers.length > 0" label="Server">
+          <a-select v-model:value="serverId">
+            <a-select-option v-for="s in filteredServers" :key="s.id" :value="s.id">
+              {{ s.cityName }} - {{ s.name }} (load: {{ s.load }}%)
+            </a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-form>
+
+      <a-divider class="my-10">Outbound status</a-divider>
+
+      <template v-if="nordOutboundIndex >= 0">
+        <a-tag color="green">Enabled</a-tag>
+        <a-button type="primary" danger :loading="loading" class="ml-8" @click="resetOutbound">
+          Reset
+        </a-button>
+      </template>
+      <template v-else>
+        <a-tag color="orange">Disabled</a-tag>
+        <a-button
+          type="primary"
+          class="ml-8"
+          :disabled="!serverId"
+          :loading="loading"
+          @click="addOutbound"
+        >Add outbound</a-button>
+      </template>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+.nord-data-table {
+  margin: 5px 0;
+  width: 100%;
+  border-collapse: collapse;
+}
+.nord-data-table td {
+  padding: 4px 8px;
+  word-break: break-all;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+}
+.nord-data-table td:first-child {
+  font-family: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  width: 130px;
+}
+.row-odd {
+  background: rgba(0, 0, 0, 0.03);
+}
+:global(body.dark) .row-odd {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.zero-margin { margin: 0; }
+.mt-8 { margin-top: 8px; }
+.mt-10 { margin-top: 10px; }
+.mt-20 { margin-top: 20px; }
+.my-10 { margin: 10px 0; }
+.ml-8 { margin-left: 8px; }
+</style>
diff --git a/frontend/src/pages/xray/WarpModal.vue b/frontend/src/pages/xray/WarpModal.vue
new file mode 100644
index 00000000..4c7d69fd
--- /dev/null
+++ b/frontend/src/pages/xray/WarpModal.vue
@@ -0,0 +1,343 @@
+<script setup>
+import { computed, ref, watch } from 'vue';
+import { ApiOutlined, SyncOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import { message } from 'ant-design-vue';
+
+import { HttpUtil, SizeFormatter, ObjectUtil, Wireguard } from '@/utils';
+
+// Cloudflare WARP provisioning modal. Mirrors the legacy warp_modal:
+//   • when no WARP account is registered yet, a single Create button
+//     generates a wireguard keypair locally and posts it to
+//     /panel/xray/warp/reg to create a Cloudflare device record;
+//   • once registered, the modal displays the access_token /
+//     device_id / license_key / private_key, lets the user upgrade
+//     to WARP+ via /panel/xray/warp/license, fetches the current
+//     account config (premium data / quota / usage) via
+//     /panel/xray/warp/config, and stages a wireguard outbound
+//     ready for adding to templateSettings.outbounds.
+
+const props = defineProps({
+  open: { type: Boolean, default: false },
+  templateSettings: { type: Object, default: null },
+});
+
+const emit = defineEmits(['update:open', 'add-outbound', 'reset-outbound', 'remove-outbound']);
+
+const loading = ref(false);
+const warpData = ref(null);
+const warpConfig = ref(null);
+const warpPlus = ref('');
+// Held in memory so the parent's add/reset handlers receive the same
+// object the modal computed from getConfig().
+const stagedOutbound = ref(null);
+
+const warpOutboundIndex = computed(() => {
+  const list = props.templateSettings?.outbounds;
+  if (!list) return -1;
+  return list.findIndex((o) => o?.tag === 'warp');
+});
+
+watch(() => props.open, (next) => {
+  if (!next) return;
+  warpConfig.value = null;
+  stagedOutbound.value = null;
+  fetchData();
+});
+
+async function fetchData() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/warp/data');
+    if (msg?.success) {
+      const raw = msg.obj;
+      warpData.value = raw && raw.length > 0 ? JSON.parse(raw) : null;
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function register() {
+  loading.value = true;
+  try {
+    const keys = Wireguard.generateKeypair();
+    const msg = await HttpUtil.post('/panel/xray/warp/reg', keys);
+    if (msg?.success) {
+      const resp = JSON.parse(msg.obj);
+      warpData.value = resp.data;
+      warpConfig.value = resp.config;
+      collectConfig();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function getConfig() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/warp/config');
+    if (msg?.success) {
+      warpConfig.value = JSON.parse(msg.obj);
+      collectConfig();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function updateLicense() {
+  if (warpPlus.value.length < 26) return;
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/warp/license', { license: warpPlus.value });
+    if (msg?.success) {
+      warpData.value = JSON.parse(msg.obj);
+      warpConfig.value = null;
+      warpPlus.value = '';
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function delConfig() {
+  loading.value = true;
+  try {
+    const msg = await HttpUtil.post('/panel/xray/warp/del');
+    if (msg?.success) {
+      warpData.value = null;
+      warpConfig.value = null;
+      stagedOutbound.value = null;
+      emit('remove-outbound', 'warp');
+      close();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+// Build the wireguard outbound shape from the WARP account data.
+// Keep this here (not on the parent) because the encoding of the
+// reserved bytes from `client_id` is WARP-specific.
+function collectConfig() {
+  const config = warpConfig.value?.config;
+  if (!config?.peers?.length) return;
+  const peer = config.peers[0];
+  stagedOutbound.value = {
+    tag: 'warp',
+    protocol: 'wireguard',
+    settings: {
+      mtu: 1420,
+      secretKey: warpData.value.private_key,
+      address: addressesFor(config.interface?.addresses || {}),
+      reserved: reservedFor(warpData.value.client_id),
+      domainStrategy: 'ForceIP',
+      peers: [{
+        publicKey: peer.public_key,
+        endpoint: peer.endpoint?.host,
+      }],
+      noKernelTun: false,
+    },
+  };
+}
+
+function addressesFor(addrs) {
+  const out = [];
+  if (addrs.v4) out.push(`${addrs.v4}/32`);
+  if (addrs.v6) out.push(`${addrs.v6}/128`);
+  return out;
+}
+
+// WARP encodes its reserved bytes as a base64-decoded triplet pulled
+// from `client_id`. We turn those bytes into an int array — same
+// algorithm the legacy modal used.
+function reservedFor(clientId) {
+  if (!clientId) return [];
+  const decoded = atob(clientId);
+  const out = [];
+  for (let i = 0; i < decoded.length; i++) out.push(decoded.charCodeAt(i));
+  return out;
+}
+
+function addOutbound() {
+  if (!stagedOutbound.value) {
+    message.warning('Fetch the WARP config first.');
+    return;
+  }
+  emit('add-outbound', stagedOutbound.value);
+  close();
+}
+
+function resetOutbound() {
+  if (!stagedOutbound.value) return;
+  emit('reset-outbound', { index: warpOutboundIndex.value, outbound: stagedOutbound.value });
+  close();
+}
+
+function close() { emit('update:open', false); }
+
+const hasWarp = computed(() => !ObjectUtil.isEmpty(warpData.value));
+const hasConfig = computed(() => !ObjectUtil.isEmpty(warpConfig.value));
+</script>
+
+<template>
+  <a-modal
+    :open="open"
+    title="Cloudflare WARP"
+    :footer="null"
+    :closable="true"
+    :mask-closable="true"
+    @cancel="close"
+  >
+    <!-- Not registered yet → single Create CTA -->
+    <template v-if="!hasWarp">
+      <a-button type="primary" :loading="loading" @click="register">
+        <template #icon><ApiOutlined /></template>
+        Create WARP account
+      </a-button>
+    </template>
+
+    <!-- Registered → account display + license + config + outbound controls -->
+    <template v-else>
+      <table class="warp-data-table">
+        <tbody>
+          <tr class="row-odd">
+            <td>Access token</td>
+            <td>{{ warpData.access_token }}</td>
+          </tr>
+          <tr>
+            <td>Device ID</td>
+            <td>{{ warpData.device_id }}</td>
+          </tr>
+          <tr class="row-odd">
+            <td>License key</td>
+            <td>{{ warpData.license_key }}</td>
+          </tr>
+          <tr>
+            <td>Private key</td>
+            <td>{{ warpData.private_key }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <a-button :loading="loading" type="primary" danger class="mt-8" @click="delConfig">
+        <template #icon><DeleteOutlined /></template>
+        Delete account
+      </a-button>
+
+      <a-divider class="zero-margin">Settings</a-divider>
+
+      <a-collapse class="my-10">
+        <a-collapse-panel header="WARP / WARP+ license key">
+          <a-form :colon="false" :label-col="{ md: { span: 6 } }" :wrapper-col="{ md: { span: 14 } }">
+            <a-form-item label="Key">
+              <a-input v-model:value="warpPlus" placeholder="26-char WARP+ key" />
+              <a-button
+                type="primary"
+                class="mt-8"
+                :disabled="warpPlus.length < 26"
+                :loading="loading"
+                @click="updateLicense"
+              >Update</a-button>
+            </a-form-item>
+          </a-form>
+        </a-collapse-panel>
+      </a-collapse>
+
+      <a-divider class="zero-margin">Account info</a-divider>
+      <a-button class="my-8" :loading="loading" type="primary" @click="getConfig">
+        <template #icon><SyncOutlined /></template>
+        Refresh
+      </a-button>
+
+      <template v-if="hasConfig">
+        <table class="warp-data-table">
+          <tbody>
+            <tr class="row-odd">
+              <td>Device name</td>
+              <td>{{ warpConfig.name }}</td>
+            </tr>
+            <tr>
+              <td>Device model</td>
+              <td>{{ warpConfig.model }}</td>
+            </tr>
+            <tr class="row-odd">
+              <td>Device enabled</td>
+              <td>{{ warpConfig.enabled }}</td>
+            </tr>
+            <template v-if="warpConfig.account">
+              <tr>
+                <td>Account type</td>
+                <td>{{ warpConfig.account.account_type }}</td>
+              </tr>
+              <tr class="row-odd">
+                <td>Role</td>
+                <td>{{ warpConfig.account.role }}</td>
+              </tr>
+              <tr>
+                <td>WARP+ data</td>
+                <td>{{ SizeFormatter.sizeFormat(warpConfig.account.premium_data) }}</td>
+              </tr>
+              <tr class="row-odd">
+                <td>Quota</td>
+                <td>{{ SizeFormatter.sizeFormat(warpConfig.account.quota) }}</td>
+              </tr>
+              <tr v-if="warpConfig.account.usage">
+                <td>Usage</td>
+                <td>{{ SizeFormatter.sizeFormat(warpConfig.account.usage) }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+
+        <a-divider class="my-10">Outbound status</a-divider>
+        <template v-if="warpOutboundIndex >= 0">
+          <a-tag color="green">Enabled</a-tag>
+          <a-button type="primary" danger :loading="loading" class="ml-8" @click="resetOutbound">
+            Reset
+          </a-button>
+        </template>
+        <template v-else>
+          <a-tag color="orange">Disabled</a-tag>
+          <a-button type="primary" :loading="loading" class="ml-8" @click="addOutbound">
+            <template #icon><PlusOutlined /></template>
+            Add outbound
+          </a-button>
+        </template>
+      </template>
+    </template>
+  </a-modal>
+</template>
+
+<style scoped>
+.warp-data-table {
+  margin: 5px 0;
+  width: 100%;
+  border-collapse: collapse;
+}
+.warp-data-table td {
+  padding: 4px 8px;
+  word-break: break-all;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+}
+.warp-data-table td:first-child {
+  font-family: inherit;
+  font-weight: 500;
+  white-space: nowrap;
+  width: 130px;
+}
+.row-odd {
+  background: rgba(0, 0, 0, 0.03);
+}
+:global(body.dark) .row-odd {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.zero-margin { margin: 0; }
+.my-8 { margin: 8px 0; }
+.mt-8 { margin-top: 8px; }
+.my-10 { margin: 10px 0; }
+.ml-8 { margin-left: 8px; }
+</style>
diff --git a/frontend/src/pages/xray/XrayPage.vue b/frontend/src/pages/xray/XrayPage.vue
index b7cf1f58..90db51a6 100644
--- a/frontend/src/pages/xray/XrayPage.vue
+++ b/frontend/src/pages/xray/XrayPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { theme as antdTheme, Modal } from 'ant-design-vue';
 import {
   SettingOutlined,
@@ -20,6 +20,8 @@ import RoutingTab from './RoutingTab.vue';
 import OutboundsTab from './OutboundsTab.vue';
 import BalancersTab from './BalancersTab.vue';
 import DnsTab from './DnsTab.vue';
+import WarpModal from './WarpModal.vue';
+import NordModal from './NordModal.vue';
 import { useXraySetting } from './useXraySetting.js';
 
 // Phase 6-i: scaffold + advanced JSON tab. Other tabs (Basics, Routing,
@@ -68,8 +70,59 @@ const nordExist = computed(
   () => !!templateSettings.value?.outbounds?.find((o) => o?.tag?.startsWith?.('nord-')),
 );
 
-function showWarp() { message.info('WARP outbound modal — coming in 6-v'); }
-function showNord() { message.info('NordVPN outbound modal — coming in 6-v'); }
+// === WARP / NordVPN provisioning modals ============================
+const warpOpen = ref(false);
+const nordOpen = ref(false);
+
+function showWarp() { warpOpen.value = true; }
+function showNord() { nordOpen.value = true; }
+
+function ensureOutbounds() {
+  if (!templateSettings.value) return null;
+  if (!Array.isArray(templateSettings.value.outbounds)) {
+    templateSettings.value.outbounds = [];
+  }
+  return templateSettings.value.outbounds;
+}
+
+function onAddOutbound(outbound) {
+  const list = ensureOutbounds();
+  if (list) list.push(outbound);
+}
+function onResetOutbound({ index, outbound, oldTag, newTag }) {
+  const list = ensureOutbounds();
+  if (!list || index < 0) return;
+  list[index] = outbound;
+  // Tag rename across routing rules — preserves Nord's
+  // server-switch flow without dangling references.
+  if (oldTag && newTag && oldTag !== newTag) {
+    const rules = templateSettings.value?.routing?.rules || [];
+    for (const r of rules) {
+      if (r?.outboundTag === oldTag) r.outboundTag = newTag;
+    }
+  }
+}
+function onRemoveOutboundByTag(tag) {
+  const list = ensureOutbounds();
+  if (!list) return;
+  const idx = list.findIndex((o) => o?.tag === tag);
+  if (idx >= 0) list.splice(idx, 1);
+}
+function onRemoveOutboundByIndex(index) {
+  const list = ensureOutbounds();
+  if (list && index >= 0) list.splice(index, 1);
+}
+function onRemoveRoutingRules({ prefix }) {
+  const rules = templateSettings.value?.routing?.rules;
+  if (!Array.isArray(rules)) return;
+  templateSettings.value.routing.rules = rules.filter(
+    (r) => !r?.outboundTag?.startsWith?.(prefix),
+  );
+}
+
+// `message` is used by some of the in-progress UX flows (kept around
+// because future provisioning errors will surface through it).
+void message;
 const { isMobile } = useMediaQuery();
 
 const basePath = window.__X_UI_BASE_PATH__ || '';
@@ -223,6 +276,22 @@ function confirmRestart() {
           </a-spin>
         </a-layout-content>
       </a-layout>
+
+      <WarpModal
+        v-model:open="warpOpen"
+        :template-settings="templateSettings"
+        @add-outbound="onAddOutbound"
+        @reset-outbound="onResetOutbound"
+        @remove-outbound="onRemoveOutboundByTag"
+      />
+      <NordModal
+        v-model:open="nordOpen"
+        :template-settings="templateSettings"
+        @add-outbound="onAddOutbound"
+        @reset-outbound="onResetOutbound"
+        @remove-outbound="onRemoveOutboundByIndex"
+        @remove-routing-rules="onRemoveRoutingRules"
+      />
     </a-layout>
   </a-config-provider>
 </template>