From 1ec87945ce865632feb6733fa699ae539c3091ad Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 17 Sep 2026 10:39:00 +0800
Subject: [PATCH 1/7] Fix(ipcalculator): parse octal input directly as BigInt

Avoid Number overflow when parsing long standalone or dotted octal
input. Cover oversized values, leading zeros, and IPv4 boundaries.

Co-Authored-By: GPT-6 <noreply@openai.com>
---
 frontend/utils/ip-calc.js |  4 ++--
 tests/ip-calc.test.js     | 31 +++++++++++++++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/frontend/utils/ip-calc.js b/frontend/utils/ip-calc.js
index 511b06f31..8df1feeda 100644
--- a/frontend/utils/ip-calc.js
+++ b/frontend/utils/ip-calc.js
@@ -476,7 +476,7 @@ const parseInetAton = (input) => {
     const notations = new Set();
     const numbers = parts.map((p) => {
         if (/^0x/i.test(p)) { notations.add('hex'); return BigInt(p); }
-        if (p.length > 1 && p.startsWith('0')) { notations.add('octal'); return BigInt(parseInt(p, 8)); }
+        if (p.length > 1 && p.startsWith('0')) { notations.add('octal'); return BigInt(`0o${p}`); }
         return BigInt(p);
     });
     const last = numbers.pop();
@@ -563,7 +563,7 @@ export const classifyInput = (raw) => {
 
     // A leading zero reads as octal, as inet_aton would.
     if (/^0[0-7]+$/.test(input)) {
-        const value = BigInt(parseInt(input, 8));
+        const value = BigInt(`0o${input}`);
         if (value > MAX_V4) return invalid(raw, input, 'integer-too-large');
         return { ...base, kind: 'ipv4', value, notation: 'octal', obfuscated: true };
     }
diff --git a/tests/ip-calc.test.js b/tests/ip-calc.test.js
index 8e64c255a..2ab1764f9 100644
--- a/tests/ip-calc.test.js
+++ b/tests/ip-calc.test.js
@@ -379,6 +379,37 @@ describe('classifyInput', () => {
         assert.equal(classifyInput('123456789012').kind, 'integer');
     });
 
+    it('rejects oversized octal inputs without passing through Number', () => {
+        for (const length of [20, 400, 10000]) {
+            const octal = `0${'7'.repeat(length)}`;
+            for (const [input, reason] of [
+                [octal, 'integer-too-large'],
+                [`${octal}.0.0.1`, 'unrecognized'],
+                [`127.${octal}`, 'unrecognized'],
+                [`0x7f.0.${octal}`, 'unrecognized'],
+            ]) {
+                for (const parse of [classifyInput, calculate]) {
+                    const result = parse(input);
+                    assert.equal(result.kind, 'invalid');
+                    assert.equal(result.reason, reason);
+                }
+            }
+        }
+    });
+
+    it('keeps octal boundaries and arbitrarily padded valid values exact', () => {
+        for (const [input, value] of [
+            ['037777777777', 0xffffffffn],
+            ['0377.0377.0377.0377', 0xffffffffn],
+            [`${'0'.repeat(400)}177`, 127n],
+            [`${'0'.repeat(400)}177.0.0.1`, 0x7f000001n],
+        ]) {
+            assert.equal(calculate(input).value, value);
+        }
+        assert.equal(calculate('040000000000').kind, 'invalid');
+        assert.equal(calculate('0400.0.0.1').kind, 'invalid');
+    });
+
     it('normalises ranges', () => {
         const r = classifyInput('192.0.2.100-192.0.2.1');
         assert.equal(r.reversed, true);

From 6de54d7e4494bd1b19ca645fbdf18275a535483f Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 17 Sep 2026 10:39:40 +0800
Subject: [PATCH 2/7] Fix(ip): reject out-of-family prefix containment values

Validate both network and address against the selected IP family.
Cover negative values, overflow, and valid IPv4 and IPv6 boundaries.

Co-Authored-By: GPT-6 <noreply@openai.com>
---
 common/ip-math.js     |  3 ++-
 tests/ip-math.test.js | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/common/ip-math.js b/common/ip-math.js
index da25272dd..801055189 100644
--- a/common/ip-math.js
+++ b/common/ip-math.js
@@ -247,7 +247,8 @@ export const cidrInfo = (str) => {
 /* ------------------------------------------------------------------ */
 
 export const prefixContains = (network, prefix, family, value) => {
-    if (!isFamily(family) || !isPrefix(prefix, family) || !isBig(network) || !isBig(value)) return false;
+    if (!isFamily(family) || !isPrefix(prefix, family)
+        || !inFamily(network, family) || !inFamily(value, family)) return false;
     const shift = BigInt(BITS[family] - prefix);
     return (value >> shift) === (network >> shift);
 };
diff --git a/tests/ip-math.test.js b/tests/ip-math.test.js
index 06cfda90e..acff368bb 100644
--- a/tests/ip-math.test.js
+++ b/tests/ip-math.test.js
@@ -260,6 +260,23 @@ describe('containment & ordering', () => {
         assert.equal(prefixContains(v4('10.0.0.0'), 8, 4, 5), false);
         assert.equal(prefixContains(v4('10.0.0.0'), 33, 4, v4('10.1.2.3')), false);
     });
+    it('prefixContains rejects negative and overflowing addresses in either position', () => {
+        for (const [family, bits] of [[4, 32], [6, 128]]) {
+            const overflow = 1n << BigInt(bits);
+            const max = overflow - 1n;
+            assert.equal(prefixContains(0n, 0, family, max), true);
+            assert.equal(prefixContains(max, bits, family, max), true);
+            for (const prefix of [0, 1, bits]) {
+                for (const invalid of [-1n, overflow, overflow + 1n]) {
+                    assert.equal(prefixContains(invalid, prefix, family, invalid), false);
+                    assert.equal(prefixContains(invalid, prefix, family, 0n), false);
+                    assert.equal(prefixContains(0n, prefix, family, invalid), false);
+                }
+            }
+            assert.equal(prefixContains(-1n, 0, family, -2n), false);
+            assert.equal(prefixContains(overflow, 0, family, overflow + 1n), false);
+        }
+    });
     it('cidrOverlaps', () => {
         assert.equal(cidrOverlaps('10.0.0.0/8', '10.1.0.0/16'), true);
         assert.equal(cidrOverlaps('10.1.0.0/16', '10.0.0.0/8'), true);

From 0c6e5f2c7a67c785db38313adcc3f9be4657088b Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 17 Sep 2026 10:39:58 +0800
Subject: [PATCH 3/7] Fix(ip): validate subnet split limits before conversion

Return null for invalid options or limits instead of throwing during
BigInt conversion. Preserve zero, default, and safe integer limits.

Co-Authored-By: GPT-6 <noreply@openai.com>
---
 common/ip-math.js     |  5 ++++-
 tests/ip-math.test.js | 23 +++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/common/ip-math.js b/common/ip-math.js
index 801055189..aedf2d0fc 100644
--- a/common/ip-math.js
+++ b/common/ip-math.js
@@ -281,7 +281,10 @@ export const compareIps = (a, b) => {
 
 // Children of `cidrStr` at `newPrefix`. `total` is exact; `subnets` stops at
 // `limit` so a /8 → /32 request never materialises 16M strings.
-export const splitCidr = (cidrStr, newPrefix, { limit = 1024 } = {}) => {
+export const splitCidr = (cidrStr, newPrefix, options = {}) => {
+    if (!options || typeof options !== 'object' || Array.isArray(options)) return null;
+    const { limit = 1024 } = options;
+    if (!Number.isSafeInteger(limit) || limit < 0) return null;
     const cidr = parseCidr(cidrStr);
     if (!cidr || !isPrefix(newPrefix, cidr.family) || newPrefix < cidr.prefix) return null;
     const { family, network } = cidr;
diff --git a/tests/ip-math.test.js b/tests/ip-math.test.js
index acff368bb..0e4bc4b5e 100644
--- a/tests/ip-math.test.js
+++ b/tests/ip-math.test.js
@@ -293,6 +293,29 @@ describe('containment & ordering', () => {
 });
 
 describe('splitCidr', () => {
+    it('rejects invalid limits and options without coercing them', () => {
+        const limits = [Infinity, -Infinity, NaN, 1.5, -1, Number.MAX_SAFE_INTEGER + 1,
+            Symbol('limit'), '4', 4n, null, true, {}, []];
+        for (const limit of limits) {
+            assert.equal(splitCidr('10.0.0.0/24', 26, { limit }), null);
+            assert.equal(splitCidr('2001:db8::/32', 48, { limit }), null);
+        }
+        for (const options of [null, false, 5, '4', 4n, Symbol('options'), []]) {
+            assert.equal(splitCidr('10.0.0.0/24', 26, options), null);
+        }
+    });
+    it('accepts zero, default and large safe limits without changing the exact total', () => {
+        const zero = splitCidr('10.0.0.0/24', 26, { limit: 0 });
+        assert.deepEqual(zero.subnets, []);
+        assert.equal(zero.total, 4n);
+        assert.equal(zero.truncated, true);
+        for (const limit of [undefined, 4, Number.MAX_SAFE_INTEGER]) {
+            const result = splitCidr('10.0.0.0/24', 26, { limit });
+            assert.equal(result.subnets.length, 4);
+            assert.equal(result.total, 4n);
+            assert.equal(result.truncated, false);
+        }
+    });
     it('splits a /24 into /26s', () => {
         const r = splitCidr('10.0.0.0/24', 26);
         assert.deepEqual(r.subnets, ['10.0.0.0/26', '10.0.0.64/26', '10.0.0.128/26', '10.0.0.192/26']);

From 1adefb13d297f898c1140219eb57bca9f5b9252e Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Thu, 17 Sep 2026 10:57:30 +0800
Subject: [PATCH 4/7] Improvements

---
 frontend/components/ui/slider/Slider.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/ui/slider/Slider.vue b/frontend/components/ui/slider/Slider.vue
index da00e4290..4b7ea4ed3 100644
--- a/frontend/components/ui/slider/Slider.vue
+++ b/frontend/components/ui/slider/Slider.vue
@@ -60,7 +60,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       v-for="(_, key) in modelValue"
       :key="key"
       data-slot="slider-thumb"
-      class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+      class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 cursor-col-resize"
     />
   </SliderRoot>
 </template>

From 40342a9631bd0e8ca6443f22449a157f89d8de79 Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Fri, 18 Sep 2026 10:00:47 +0800
Subject: [PATCH 5/7] Improvements

---
 frontend/components/widgets/InfoBanner.vue | 152 ++++++++++---------
 frontend/utils/banners.js                  |  54 +++++--
 tests/banners.test.js                      | 162 ++++++++++++++++-----
 3 files changed, 249 insertions(+), 119 deletions(-)

diff --git a/frontend/components/widgets/InfoBanner.vue b/frontend/components/widgets/InfoBanner.vue
index 138f38024..b2569d96f 100644
--- a/frontend/components/widgets/InfoBanner.vue
+++ b/frontend/components/widgets/InfoBanner.vue
@@ -1,39 +1,44 @@
-<!-- InfoBanner — the per-section info-banner slot. Every homepage section
-     permanently wires one of these at its bottom; what (if anything) shows is
-     decided purely by data: frontend/data/banners/<section>.js (contract in
-     utils/banners.js), one banner per section. The directory is deploy-time
-     data, never in git — placing a file there IS the decision to show that
-     banner on that deployment (self-promo of a built-in tool via `to`, a
-     nudge into a side panel via `sheet`, or an external advertiser via
-     `url`); a missing file and a file
-     default-exporting null both mean the slot renders nothing. Timing is
-     data-driven: parents feed their section's completion into the `settled`
-     prop, and
-     a banner waits for it unless its data sets requireSettled: false. The
-     fade-slide appear/disappear can be turned off per banner with
-     transition: false; with `sweep: true`, the banner announces itself with a
-     border light sweep whenever it scrolls into view. -->
+<!-- Per-section banner slot. Deploy-time data in data/banners/<section>.js
+     exports null, one campaign object, or up to two campaigns. Each campaign
+     keeps its own completion gate and animation; visible pairs use two columns. -->
 <template>
-  <Transition :name="transitionName">
-    <div v-if="banner && shown" ref="root" :class="{ 'jn-banner-sweep': sweep && visible }"
-      class="jn-banner mt-3 flex flex-col md:flex-row items-start gap-3 rounded-lg border border-info/30 bg-info/5 p-4 md:p-5">
-      <div class="flex-1 min-w-0 space-y-1.5">
-        <h3 class="text-sm font-semibold m-0 flex items-center gap-2 mb-2">
-          <component :is="icon" class="size-4 text-info shrink-0" />
-          {{ text.title }}
-        </h3>
-        <p class="text-sm text-muted-foreground leading-relaxed m-0">
-          {{ text.note }}
-        </p>
+  <div :class="[shownCount > 0 ? 'grid mt-3 gap-3' : 'contents', { 'md:grid-cols-2': paired }]">
+    <Transition v-for="({ banner, text, pricing, icon, theme, shown }, index) in banners" :key="banner.id"
+      :name="banner.transition === false ? 'jn-none' : 'fade-slide'">
+      <div v-if="shown" :ref="(element) => { slots[index].element.value = element; }" :style="theme"
+        :class="{ 'jn-banner-sweep': banner.sweep === true && slots[index].visible.value, 'md:flex-row md:items-center': !paired }"
+        class="jn-banner min-w-0 flex flex-col items-start gap-3 rounded-lg border p-4 md:p-5">
+        <div class="flex-1 min-w-0 space-y-1.5">
+          <h3 class="text-sm font-semibold m-0 flex items-center gap-2 mb-2">
+            <component :is="icon" class="jn-banner-icon size-4 shrink-0" />
+            {{ text.title }}
+          </h3>
+          <p class="text-sm text-muted-foreground leading-relaxed m-0">
+            {{ text.note }}
+          </p>
+        </div>
+        <!-- Keep the offer next to its action, at the bottom of paired cards. -->
+        <div class="w-full flex flex-col justify-center items-center gap-2"
+          :class="paired ? 'mt-auto md:flex-row md:justify-between md:gap-3' : 'md:w-auto md:max-w-[45%] md:flex-row md:gap-4'">
+          <p v-if="pricing" class="jn-banner-price m-0 min-w-0 max-w-full flex flex-wrap items-baseline justify-center gap-x-1 text-center break-words"
+            :class="{ 'md:flex-1 md:justify-start md:text-left': paired }">
+            <span v-if="pricing.text" class="text-sm font-medium">{{ pricing.text }}</span>
+            <template v-else>
+              <span v-if="pricing.prefix" class="text-xs">{{ pricing.prefix }}</span>
+              <span class="text-xl leading-6 font-semibold tabular-nums tracking-tight">{{ pricing.amount }}</span>
+              <span v-if="pricing.suffix" class="text-xs">{{ pricing.suffix }}</span>
+            </template>
+          </p>
+          <Button variant="action" size="sm" @click="openBanner(banner)"
+            :class="{ 'jn-banner-cta': banner.color, 'md:ml-auto': paired, 'md:max-w-[55%]': pricing }"
+            class="w-full md:w-auto h-auto min-h-11 md:min-h-9 px-4 py-2 text-sm leading-5 whitespace-normal shrink-0 cursor-pointer">
+            <span>{{ text.cta }}</span>
+            <ArrowRight class="size-4 ml-1" />
+          </Button>
+        </div>
       </div>
-      <div class="w-full md:w-auto md:self-stretch flex justify-end items-end md:items-center">
-        <Button variant="action" size="sm" @click="openBanner" class="w-full md:w-auto shrink-0 cursor-pointer">
-          <span>{{ text.cta }}</span>
-          <ArrowRight class="size-4 ml-1" />
-        </Button>
-      </div>
-    </div>
-  </Transition>
+    </Transition>
+  </div>
 </template>
 
 <script setup>
@@ -44,57 +49,48 @@ import { useMainStore } from '@/store';
 import { Button } from '@/components/ui/button';
 import { ArrowRight, Globe, Megaphone, Server, Shield, Sparkles, Zap } from '@lucide/vue';
 import { trackEvent } from '@/utils/analytics';
-import { bannerCopy, bannerLink, pickBanner } from '@/utils/banners';
+import { bannerCopy, bannerLink, bannerPricing, bannerShown, bannerTheme, pickBanners } from '@/utils/banners';
 
 const props = defineProps({
   section: { type: String, required: true },
-  settled: { type: Boolean, default: true }, // parent's "section tests have completed a full pass" signal
+  settled: { type: Boolean, default: true },
 });
 
-// Data discovery — glob is resolved at build time; the slot's file is the one
-// named after the section, and null/absent both mean "render nothing".
-const modules = import.meta.glob('../../data/banners/*.js', { eager: true });
-const banner = pickBanner(modules, props.section);
-
-// Data files carry lucide icon NAMES so they stay pure (Node-loadable by the
-// data test); the component maps them onto imported components here.
+// Campaign data stays Node-loadable by using icon names instead of imports.
 const ICONS = { Globe, Megaphone, Server, Shield, Sparkles, Zap };
-const icon = ICONS[banner?.icon] ?? Megaphone;
-const sweep = banner?.sweep === true; // opt-in per banner, default off
-// transition: false in the data swaps to a name with no CSS hooks, so the
-// Transition finds no transition/animation styles and inserts/removes the
-// element instantly — no fade-slide.
-const transitionName = banner?.transition === false ? 'jn-none' : 'fade-slide';
-
+const modules = import.meta.glob('../../data/banners/*.js', { eager: true });
 const store = useMainStore();
 const router = useRouter();
 const lang = computed(() => store.lang);
-// requireSettled defaults to true — only an explicit false shows the banner
-// before the parent reports `settled`. Deployment placement is the only other
-// gate: whoever put the data file on this deployment wanted the banner shown.
-const shown = computed(() => banner?.requireSettled === false || props.settled);
-// Locale-reactive: the inline `copy` map resolves via the store language.
-const text = computed(() => bannerCopy(banner, lang.value));
-
-const openBanner = () => {
-  // Section in the event name (GA4 reports list event names out of the box;
-  // params would need registered custom dimensions), campaign id as label.
+const banners = computed(() => pickBanners(modules, props.section).map((banner) => ({
+  banner,
+  text: bannerCopy(banner, lang.value),
+  pricing: bannerPricing(bannerCopy(banner, lang.value).pricing),
+  icon: ICONS[banner.icon] ?? Megaphone,
+  theme: bannerTheme(banner),
+  shown: bannerShown(banner, props.settled),
+})));
+const shownCount = computed(() => banners.value.filter(({ shown }) => shown).length);
+const paired = computed(() => shownCount.value > 1);
+// The slot holds at most two cards. Observe each independently so entering
+// the viewport replays only that card's sweep, including after a settled gate.
+const slots = Array.from({ length: 2 }, () => {
+  const element = ref(null);
+  const visible = useElementVisibility(element, { threshold: 0.5 });
+  return { element, visible };
+});
+
+const openBanner = (banner) => {
+  // Section in the event name, campaign id as label for GA4 attribution.
   trackEvent('Section', `BannerClick_${props.section}`, banner.track);
   if (banner.sheet) {
-    store.setOpenSheet(banner.sheet); // the store's exclusive side-panel slot
+    store.setOpenSheet(banner.sheet);
   } else if (banner.to) {
     router.push(banner.to);
   } else {
     window.open(bannerLink(banner, lang.value), '_blank', 'noopener');
   }
 };
-
-// `shown` can flip while the banner is still below the fold, so entering the
-// viewport — not mounting — is what triggers the sweep. Leaving and coming
-// back replays it. Nothing is observed until the element exists, so a banner
-// without `sweep` only pays for one idle observer.
-const root = ref(null);
-const visible = useElementVisibility(root, { threshold: 0.5 });
 </script>
 
 <style scoped>
@@ -108,6 +104,22 @@ const visible = useElementVisibility(root, { threshold: 0.5 });
 
 .jn-banner {
   position: relative;
+  border-color: color-mix(in oklch, var(--banner-color) 30%, transparent);
+  background: color-mix(in oklch, var(--banner-color) 5%, transparent);
+}
+
+.jn-banner-icon,
+.jn-banner-price {
+  color: var(--banner-color);
+}
+
+.jn-banner-cta {
+  background: var(--banner-color);
+  color: var(--banner-foreground);
+}
+
+.jn-banner-cta:hover {
+  background: color-mix(in oklch, var(--banner-color) 90%, transparent);
 }
 
 .jn-banner-sweep::before {
@@ -118,8 +130,8 @@ const visible = useElementVisibility(root, { threshold: 0.5 });
   border-radius: inherit;
   background: conic-gradient(from var(--jn-sweep-angle),
       transparent 0deg 250deg,
-      color-mix(in oklch, var(--info) 60%, transparent) 320deg,
-      var(--info) 352deg,
+      color-mix(in oklch, var(--banner-color) 60%, transparent) 320deg,
+      var(--banner-color) 352deg,
       transparent 360deg);
   /* Keep only the 1px ring: full box minus content box. */
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
diff --git a/frontend/utils/banners.js b/frontend/utils/banners.js
index 00895a92b..969911970 100644
--- a/frontend/utils/banners.js
+++ b/frontend/utils/banners.js
@@ -2,8 +2,8 @@
 // InfoBanner.vue). Every homepage section owns one fixed slot, served by
 // one data file: frontend/data/banners/<section>.js (e.g. ipinfo.js serves
 // <InfoBanner section="ipinfo" />). The file default-exports either `null`
-// (slot explicitly off) or ONE plain object — no imports, so the plain Node
-// test runner can load it:
+// (slot explicitly off), one plain object, or an array of up to TWO objects.
+// No imports, so the plain Node test runner can load it:
 //
 //   {
 //     id: 'vps',                   // unique across all data files
@@ -13,9 +13,17 @@
 //                                  // unknown/absent falls back to Megaphone
 //     track: 'IPInfoVPS',          // campaign id — the label on the
 //                                  // BannerClick_<section> analytics event
-//     copy: { en: { title, note, cta }, zh: { … }, … },  // wording: en
+//     copy: { en: { title, note, cta, pricing }, zh: { … }, … }, // wording: en
 //                                  // required, other langs optional,
-//                                  // fallback is en
+//                                  // fallback is en; pricing is optional,
+//                                  // e.g. 'Starting from $2.99', or
+//                                  // { prefix: 'From', amount: '$2.99',
+//                                  //   suffix: '/ month' } for price hierarchy
+//     color: 'info',              // optional theme token: info, action,
+//                                  // success, warning, primary, destructive
+//                                  // themes border, background, icon, sweep,
+//                                  // and CTA; omitted keeps the original
+//                                  // info card with an action-colored CTA
 //     // Click target — exactly ONE of:
 //     url: 'https://…',            // external: new tab, utm params appended
 //     utm: { source: '…', … },     // with `url` only; keys WITHOUT the utm_
@@ -35,9 +43,17 @@
 //                                  // the viewport; default false
 //   }
 //
-// Banner wording is data by design — the inline `copy` map is the ONLY
-// wording form, never locale-pack keys: banners are per-campaign deploy-time
-// data files, not product UI, and must ride along without touching locales/.
+// Campaign wording lives in `copy`, independent of locale packs.
+
+export const BANNER_COLORS = ['info', 'action', 'success', 'warning', 'primary', 'destructive'];
+
+// Theme tokens adapt to light/dark mode and carry a matching CTA foreground.
+export const bannerTheme = (banner) => {
+    const color = BANNER_COLORS.includes(banner?.color) ? banner.color : 'info';
+    return { '--banner-color': `var(--${color})`, '--banner-foreground': `var(--${color}-foreground)` };
+};
+
+export const bannerShown = (banner, settled) => banner.requireSettled === false || settled;
 
 // Banner wording for the active locale: the language block from the inline
 // `copy` map, falling back to English. Always returns a renderable object so
@@ -47,6 +63,15 @@ export const bannerCopy = (banner, lang) => {
     return copy[lang] ?? copy.en ?? { title: '', note: '', cta: '' };
 };
 
+// Keep free-form campaign prices compatible; structured prices emphasize
+// only the amount, without trying to parse currency or language-specific copy.
+export const bannerPricing = (pricing) => {
+    if (typeof pricing === 'string') return pricing.trim() ? { text: pricing } : null;
+    if (!pricing || typeof pricing.amount !== 'string' || !pricing.amount.trim()) return null;
+    if (['prefix', 'suffix'].some((key) => pricing[key] !== undefined && typeof pricing[key] !== 'string')) return null;
+    return { prefix: pricing.prefix ?? '', amount: pricing.amount, suffix: pricing.suffix ?? '' };
+};
+
 // External landing URL with utm_* attribution: each `utm` key gains the utm_
 // prefix, and utm_content carries the visitor's locale so campaigns see which
 // language surface converted. Existing query params on `url` are preserved.
@@ -59,14 +84,19 @@ export const bannerLink = (banner, lang) => {
     return url.toString();
 };
 
-// The banner for a section from an import.meta.glob modules map
+// The banners for a section from an import.meta.glob modules map
 // ({ path: module }): the file NAMED after the section is its slot —
 // data/banners/ipinfo.js serves section "ipinfo". A missing file and a file
-// default-exporting null/undefined both mean "no banner" (returns null).
-export const pickBanner = (modules, section) => {
+// default-exporting null/undefined both mean "no banner" (returns []). Older
+// single-object files remain valid; extra entries never render beyond two.
+export const pickBanners = (modules, section) => {
     for (const key of Object.keys(modules ?? {})) {
         const name = key.split('/').pop().replace(/\.js$/, '');
-        if (name === section) return modules[key]?.default ?? null;
+        if (name === section) {
+            const data = modules[key]?.default;
+            if (data == null) return [];
+            return Array.isArray(data) ? data.slice(0, 2) : [data];
+        }
     }
-    return null;
+    return [];
 };
diff --git a/tests/banners.test.js b/tests/banners.test.js
index 69f528bfa..47e5d9e31 100644
--- a/tests/banners.test.js
+++ b/tests/banners.test.js
@@ -9,7 +9,7 @@ import { describe, it } from 'node:test';
 import { readdir } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath, pathToFileURL } from 'node:url';
-import { bannerCopy, bannerLink, pickBanner } from '../frontend/utils/banners.js';
+import { BANNER_COLORS, bannerCopy, bannerLink, bannerPricing, bannerShown, bannerTheme, pickBanners } from '../frontend/utils/banners.js';
 
 const repoRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const BANNERS_DIR = path.join(repoRoot, 'frontend', 'data', 'banners');
@@ -51,6 +51,38 @@ describe('bannerCopy', () => {
     });
 });
 
+describe('bannerPricing', () => {
+    it('preserves legacy price strings without guessing currency or language boundaries', () => {
+        for (const text of ['Starting from $2.99 / month', '每月低至 $2.99', 'À partir de 2,99 $']) {
+            assert.deepEqual(bannerPricing(text), { text });
+        }
+    });
+
+    it('supports localized structured prices and optional qualifiers', () => {
+        const pricing = { prefix: '低至', amount: '$2.99', suffix: '/ 月' };
+        assert.deepEqual(bannerPricing(pricing), pricing);
+        assert.deepEqual(bannerPricing({ amount: '免费' }), { prefix: '', amount: '免费', suffix: '' });
+        assert.deepEqual(bannerPricing({ amount: '$0.00', suffix: '/ month' }), {
+            prefix: '', amount: '$0.00', suffix: '/ month',
+        });
+    });
+
+    it('hides missing, blank and malformed prices rather than rendering object text', () => {
+        for (const pricing of [undefined, null, '', '  ', 2.99, [], {}, { prefix: 'From' },
+            { amount: '' }, { amount: ' ' }, { amount: 2.99 }, { amount: '$2.99', suffix: 1 }]) {
+            assert.equal(bannerPricing(pricing), null);
+        }
+    });
+
+    it('resolves structured prices through the existing campaign locale fallback', () => {
+        const en = { prefix: 'From', amount: '$2.99', suffix: '/ month' };
+        const zh = { prefix: '低至', amount: '$2.99', suffix: '/ 月' };
+        const banner = { copy: { en: { pricing: en }, zh: { pricing: zh } } };
+        assert.deepEqual(bannerPricing(bannerCopy(banner, 'zh').pricing), zh);
+        assert.deepEqual(bannerPricing(bannerCopy(banner, 'fr').pricing), en);
+    });
+});
+
 describe('bannerLink', () => {
     it('appends prefixed utm params and utm_content=lang, keeping existing query', () => {
         const url = new URL(bannerLink(external, 'zh'));
@@ -69,7 +101,7 @@ describe('bannerLink', () => {
     });
 });
 
-describe('pickBanner', () => {
+describe('pickBanners', () => {
     // Shape mirrors an eager import.meta.glob result: { path: { default } }.
     const modules = {
         '../../data/banners/ipinfo.js': { default: external },
@@ -78,19 +110,61 @@ describe('pickBanner', () => {
     };
 
     it('matches by filename: <section>.js serves section "<section>"', () => {
-        assert.equal(pickBanner(modules, 'ipinfo'), external);
-        assert.equal(pickBanner(modules, 'webrtc'), internal);
+        assert.deepEqual(pickBanners(modules, 'ipinfo'), [external]);
+        assert.deepEqual(pickBanners(modules, 'webrtc'), [internal]);
     });
 
     it('treats a null default export as absent', () => {
-        assert.equal(pickBanner(modules, 'speedtest'), null);
-        assert.equal(pickBanner({ './x.js': {} }, 'x'), null); // undefined default
+        assert.deepEqual(pickBanners(modules, 'speedtest'), []);
+        assert.deepEqual(pickBanners({ './x.js': {} }, 'x'), []); // undefined default
+    });
+
+    it('returns an empty array when nothing matches or the map is empty', () => {
+        assert.deepEqual(pickBanners(modules, 'connectivity'), []);
+        assert.deepEqual(pickBanners({}, 'ipinfo'), []);
+        assert.deepEqual(pickBanners(undefined, 'ipinfo'), []);
+    });
+});
+
+describe('banner arrays and presentation options', () => {
+    it('keeps array order and limits display to two without mutating the data', () => {
+        const campaigns = [external, internal, { ...internal, id: 'third' }];
+        assert.deepEqual(pickBanners({ './ipinfo.js': { default: campaigns } }, 'ipinfo'), [external, internal]);
+        assert.equal(campaigns.length, 3);
+        assert.deepEqual(pickBanners({ './ipinfo.js': { default: [] } }, 'ipinfo'), []);
+        assert.deepEqual(pickBanners({ './ipinfo.js': { default: [external] } }, 'ipinfo'), [external]);
+    });
+
+    it('gates each campaign independently and defaults to waiting for completion', () => {
+        assert.equal(bannerShown(external, false), false);
+        assert.equal(bannerShown(external, true), true);
+        assert.equal(bannerShown({ requireSettled: true }, false), false);
+        assert.equal(bannerShown({ requireSettled: false }, false), true);
+        const campaigns = [external, { ...internal, requireSettled: false }];
+        assert.equal(campaigns.filter((banner) => bannerShown(banner, false)).length, 1);
+        assert.equal(campaigns.filter((banner) => bannerShown(banner, true)).length, 2);
+    });
+
+    it('uses paired semantic color tokens, with info as the default and invalid-value fallback', () => {
+        for (const color of BANNER_COLORS) {
+            assert.deepEqual(bannerTheme({ color }), {
+                '--banner-color': `var(--${color})`,
+                '--banner-foreground': `var(--${color}-foreground)`,
+            });
+        }
+        for (const value of [undefined, {}, { color: 'unknown' }, { color: '#fff' }]) {
+            assert.deepEqual(bannerTheme(value), bannerTheme({ color: 'info' }));
+        }
     });
 
-    it('returns null when nothing matches or the map is empty', () => {
-        assert.equal(pickBanner(modules, 'connectivity'), null);
-        assert.equal(pickBanner({}, 'ipinfo'), null);
-        assert.equal(pickBanner(undefined, 'ipinfo'), null);
+    it('resolves localized pricing with the campaign copy and its English fallback', () => {
+        const banner = { copy: {
+            en: { ...external.copy.en, pricing: 'Starting from $2.99' },
+            zh: { ...external.copy.zh, pricing: '低至 $2.99' },
+        } };
+        assert.equal(bannerCopy(banner, 'zh').pricing, '低至 $2.99');
+        assert.equal(bannerCopy(banner, 'fr').pricing, 'Starting from $2.99');
+        assert.equal(bannerCopy(external, 'en').pricing, undefined);
     });
 });
 
@@ -113,35 +187,49 @@ describe('banner data files', () => {
             // Dynamic import doubles as the purity check: a data file that
             // imported Vue or app code would fail to load under Node.
             const mod = await import(pathToFileURL(path.join(BANNERS_DIR, file)).href);
-            const banner = mod.default;
-            if (banner === null) continue; // explicitly disabled slot — valid
-            assert.ok(banner && typeof banner === 'object', `${file}: default export must be an object or null`);
-            for (const field of ['id', 'icon', 'track']) {
-                assert.ok(typeof banner[field] === 'string' && banner[field].length > 0,
-                    `${file}: ${field} must be a non-empty string`);
-            }
-            // Click target: exactly one of external `url` / internal `to` /
-            // side panel `sheet`.
-            const hasUrl = typeof banner.url === 'string';
-            const targets = ['url', 'to', 'sheet'].filter((k) => typeof banner[k] === 'string');
-            assert.equal(targets.length, 1, `${file}: exactly one of url | to | sheet`);
-            if (hasUrl) {
-                assert.doesNotThrow(() => new URL(banner.url), `${file}: url must parse`);
-            } else {
-                assert.ok(banner.utm === undefined, `${file}: utm only makes sense with url`);
-            }
-            // Wording is always the inline `copy` map: en required and
-            // complete, other languages optional (bannerCopy falls back).
-            for (const field of ['title', 'note', 'cta']) {
-                assert.ok(typeof banner.copy?.en?.[field] === 'string' && banner.copy.en[field].length > 0,
-                    `${file}: copy.en.${field} must be a non-empty string`);
-            }
-            for (const flag of ['requireSettled', 'transition', 'sweep']) {
-                if (banner[flag] !== undefined) {
-                    assert.equal(typeof banner[flag], 'boolean', `${file}: ${flag} must be a boolean`);
+            const data = mod.default;
+            if (data === null) continue; // explicitly disabled slot — valid
+            const banners = Array.isArray(data) ? data : [data];
+            assert.ok(banners.length <= 2, `${file}: at most two banners per section`);
+            for (const banner of banners) {
+                assert.ok(banner && typeof banner === 'object' && !Array.isArray(banner),
+                    `${file}: each banner must be an object`);
+                for (const field of ['id', 'icon', 'track']) {
+                    assert.ok(typeof banner[field] === 'string' && banner[field].length > 0,
+                        `${file}: ${field} must be a non-empty string`);
+                }
+                // Click target: exactly one of external `url` / internal `to` /
+                // side panel `sheet`.
+                const hasUrl = typeof banner.url === 'string';
+                const targets = ['url', 'to', 'sheet'].filter((k) => typeof banner[k] === 'string');
+                assert.equal(targets.length, 1, `${file}: exactly one of url | to | sheet`);
+                if (hasUrl) {
+                    assert.doesNotThrow(() => new URL(banner.url), `${file}: url must parse`);
+                } else {
+                    assert.ok(banner.utm === undefined, `${file}: utm only makes sense with url`);
+                }
+                // Wording is always the inline `copy` map: en required and
+                // complete, other languages optional (bannerCopy falls back).
+                for (const field of ['title', 'note', 'cta']) {
+                    assert.ok(typeof banner.copy?.en?.[field] === 'string' && banner.copy.en[field].length > 0,
+                        `${file}: copy.en.${field} must be a non-empty string`);
+                }
+                for (const flag of ['requireSettled', 'transition', 'sweep']) {
+                    if (banner[flag] !== undefined) {
+                        assert.equal(typeof banner[flag], 'boolean', `${file}: ${flag} must be a boolean`);
+                    }
+                }
+                if (banner.color !== undefined) {
+                    assert.ok(BANNER_COLORS.includes(banner.color), `${file}: color must be a supported theme token`);
+                }
+                for (const [lang, copy] of Object.entries(banner.copy)) {
+                    if (copy.pricing !== undefined) {
+                        assert.ok(typeof copy.pricing === 'string' || bannerPricing(copy.pricing)?.amount,
+                            `${file}: copy.${lang}.pricing must be a string or a structured price with a non-empty amount`);
+                    }
                 }
+                ids.push(banner.id);
             }
-            ids.push(banner.id);
         }
         assert.equal(new Set(ids).size, ids.length, 'banner ids must be unique');
     });

From ab42ba6acff07f29f5f6dd4d7f9c6570a27e6e6d Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Fri, 18 Sep 2026 10:15:28 +0800
Subject: [PATCH 6/7] Improvements

---
 .../widgets/ConnectivityAddDialog.vue         | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/frontend/components/widgets/ConnectivityAddDialog.vue b/frontend/components/widgets/ConnectivityAddDialog.vue
index d20b5559c..39903e620 100644
--- a/frontend/components/widgets/ConnectivityAddDialog.vue
+++ b/frontend/components/widgets/ConnectivityAddDialog.vue
@@ -2,7 +2,7 @@
   <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
     <!-- One fixed desktop width (Help.vue precedent); the custom-form tab
          centers its narrower content instead of resizing the dialog. -->
-    <DialogContent class="md:max-w-2xl md:min-h-165">
+    <DialogContent class="md:max-w-2xl min-h-160">
       <DialogHeader :icon="CirclePlus" :title="t('connectivity.importDialog.Title')" />
 
       <Tabs v-model="tab" class="w-full">
@@ -20,7 +20,7 @@
              (inert once fully present) or a fresh list named after the
              curated one. -->
         <TabsContent value="import" class="space-y-3">
-          <ul class="grid gap-2 md:grid-cols-2 max-h-[55vh] overflow-y-auto pr-1">
+          <ul class="grid gap-2 md:grid-cols-2 max-h-110 overflow-y-auto pr-1">
             <li v-for="list in importableLists" :key="list.id"
               class="flex items-start gap-3 p-3 rounded-lg border bg-card">
               <span class="size-6 shrink-0 inline-flex items-center justify-center text-lg leading-none">
@@ -40,8 +40,7 @@
               <DropdownMenu>
                 <DropdownMenuTrigger as-child>
                   <Button size="icon" variant="outline" class="size-8 shrink-0 cursor-pointer"
-                    :title="t('connectivity.importDialog.Import')"
-                    :aria-label="t('connectivity.importDialog.Import')">
+                    :title="t('connectivity.importDialog.Import')" :aria-label="t('connectivity.importDialog.Import')">
                     <Plus class="size-4" />
                   </Button>
                 </DropdownMenuTrigger>
@@ -116,10 +115,9 @@
              in utils/connectivity-lists.js. -->
         <TabsContent value="lists" class="space-y-3">
           <div class="flex items-center gap-2">
-            <Input id="new-conn-list" v-model="newListName"
-              :placeholder="t('connectivity.lists.NewListPlaceholder')" autocomplete="off" autocorrect="off"
-              autocapitalize="off" spellcheck="false" data-1p-ignore data-lpignore="true"
-              @keyup.enter="handleCreateList" :maxlength="CONNECTIVITY_LIST_NAME_LIMIT" />
+            <Input id="new-conn-list" v-model="newListName" :placeholder="t('connectivity.lists.NewListPlaceholder')"
+              autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" data-1p-ignore
+              data-lpignore="true" @keyup.enter="handleCreateList" :maxlength="CONNECTIVITY_LIST_NAME_LIMIT" />
             <Button variant="action" type="button" class="shrink-0 cursor-pointer" @click="handleCreateList"
               :disabled="newListName.trim().length === 0 || lists.length >= CONNECTIVITY_LIST_LIMIT">
               {{ t('connectivity.lists.Create') }}
@@ -128,17 +126,16 @@
           <ul class="rounded-lg border bg-card divide-y max-h-[48vh] overflow-y-auto">
             <li v-for="(list, index) in lists" :key="list.id" class="flex items-center gap-2 p-3">
               <template v-if="renamingId === list.id">
-                <Input v-model="renameDraft" class="h-9 flex-1" autocomplete="off" data-1p-ignore
-                  data-lpignore="true" :maxlength="CONNECTIVITY_LIST_NAME_LIMIT" @keyup.enter="confirmRename(list)"
+                <Input v-model="renameDraft" class="h-9 flex-1" autocomplete="off" data-1p-ignore data-lpignore="true"
+                  :maxlength="CONNECTIVITY_LIST_NAME_LIMIT" @keyup.enter="confirmRename(list)"
                   @keyup.esc="renamingId = null" />
                 <Button size="icon" variant="outline" class="size-8 shrink-0 cursor-pointer"
                   @click="confirmRename(list)" :title="t('connectivity.lists.Save')"
                   :aria-label="t('connectivity.lists.Save')">
                   <Check class="size-4" />
                 </Button>
-                <Button size="icon" variant="ghost" class="size-8 shrink-0 cursor-pointer"
-                  @click="renamingId = null" :title="t('connectivity.lists.Cancel')"
-                  :aria-label="t('connectivity.lists.Cancel')">
+                <Button size="icon" variant="ghost" class="size-8 shrink-0 cursor-pointer" @click="renamingId = null"
+                  :title="t('connectivity.lists.Cancel')" :aria-label="t('connectivity.lists.Cancel')">
                   <X class="size-4" />
                 </Button>
               </template>
@@ -148,8 +145,8 @@
                   <span class="text-xs text-muted-foreground">
                     {{ t('connectivity.importDialog.SiteCount', { n: list.members.length }) }}</span>
                 </span>
-                <Button size="icon" variant="ghost" class="size-8 shrink-0 cursor-pointer"
-                  :disabled="index === 0" @click="handleMove(list, -1)" :title="t('connectivity.lists.MoveUp')"
+                <Button size="icon" variant="ghost" class="size-8 shrink-0 cursor-pointer" :disabled="index === 0"
+                  @click="handleMove(list, -1)" :title="t('connectivity.lists.MoveUp')"
                   :aria-label="t('connectivity.lists.MoveUp')">
                   <ChevronUp class="size-4" />
                 </Button>

From aa9f31472e46b1fe32ef4bc4d69242410615bc4a Mon Sep 17 00:00:00 2001
From: jason5ng32 <jason5ng32@gmail.com>
Date: Mon, 21 Sep 2026 23:20:03 +0800
Subject: [PATCH 7/7] Chore(release): set the v7.6.0 release date

Apply only the release-date change from
f7e332c15def68098843ade4551af5e50a78cf63.

Co-Authored-By: GPT-6 <noreply@openai.com>
---
 frontend/data/changelog.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/data/changelog.json b/frontend/data/changelog.json
index 5eefac6fe..7220c69df 100644
--- a/frontend/data/changelog.json
+++ b/frontend/data/changelog.json
@@ -2089,7 +2089,7 @@
   },
   {
     "version": "v7.6.0",
-    "date": "Beta",
+    "date": "2026-09-21",
     "content": [
       {
         "type": "add",