From 1e0822eaa22eaf345dc8dedb20c9efaf07ad9023 Mon Sep 17 00:00:00 2001
From: johba <johba@noreply.codeberg.org>
Date: Fri, 20 Feb 2026 17:28:59 +0100
Subject: [PATCH] fix: clean URLs, contract addresses, gitmodule (#16, #58,
 #147) (#162)

---
 .gitmodules                                   |  1 +
 landing/src/components/KFooter.vue            | 63 ++++++++++++++++++-
 landing/src/components/WalletCard.vue         |  2 +-
 landing/src/views/docs/TokenomicsDocs.vue     |  2 +-
 tests/e2e/01-acquire-and-stake.spec.ts        |  7 ++-
 tests/e2e/02-max-stake-all-tax-rates.spec.ts  |  7 ++-
 tests/e2e/03-verify-graphql-url.spec.ts       |  2 +-
 tests/e2e/06-dashboard-pages.spec.ts          | 12 ++--
 tests/e2e/usertest/alex-newcomer.spec.ts      |  8 +--
 tests/e2e/usertest/all-personas.spec.ts       |  6 +-
 tests/e2e/usertest/helpers.ts                 |  2 +-
 tests/e2e/usertest/marcus-degen.spec.ts       |  8 +--
 .../e2e/usertest/priya-institutional.spec.ts  |  8 +--
 tests/e2e/usertest/sarah-yield-farmer.spec.ts |  8 +--
 tests/e2e/usertest/test-b-staker-v2.spec.ts   |  2 +-
 tests/e2e/usertest/test-b-staker.spec.ts      |  2 +-
 tests/e2e/usertest/tyler-retail-degen.spec.ts |  6 +-
 tests/setup/navigate.ts                       | 17 +++++
 .../src/components/layouts/NavbarHeader.vue   |  2 +-
 web-app/src/layouts/NavbarLayout.vue          |  2 +-
 web-app/src/router/index.ts                   |  6 +-
 21 files changed, 126 insertions(+), 47 deletions(-)
 create mode 100644 tests/setup/navigate.ts

diff --git a/.gitmodules b/.gitmodules
index 4a59d24..c14d654 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -7,6 +7,7 @@
 [submodule "onchain/lib/uni-v3-lib"]
 	path = onchain/lib/uni-v3-lib
 	url = https://github.com/Aperture-Finance/uni-v3-lib
+	ignore = dirty
 [submodule "onchain/lib/openzeppelin-contracts"]
 	path = onchain/lib/openzeppelin-contracts
 	url = https://github.com/openzeppelin/openzeppelin-contracts
diff --git a/landing/src/components/KFooter.vue b/landing/src/components/KFooter.vue
index e07b545..084fcc2 100644
--- a/landing/src/components/KFooter.vue
+++ b/landing/src/components/KFooter.vue
@@ -1,13 +1,37 @@
 <template>
   <footer class="k-container">
     <div class="k-footer">
-      KrAIken is a project by <u><a href="https://sovraigns.network/" target="_blank">SovrAIgns.network</a></u
-      >.<br />
-      Autonomous liquidity protocol. Use at your own risk.
+      <div class="k-footer__contracts" v-if="krkAddress || stakeAddress">
+        <div class="k-footer__contracts-title">Verified Contracts</div>
+        <div class="k-footer__contracts-list">
+          <a v-if="krkAddress" :href="`https://basescan.org/address/${krkAddress}`" target="_blank" rel="noopener noreferrer">
+            KRK Token: {{ shortAddress(krkAddress) }}
+          </a>
+          <a v-if="stakeAddress" :href="`https://basescan.org/address/${stakeAddress}`" target="_blank" rel="noopener noreferrer">
+            Stake: {{ shortAddress(stakeAddress) }}
+          </a>
+        </div>
+        <div class="k-footer__audit-note">⚠️ Unaudited — use at your own risk</div>
+      </div>
+      <div class="k-footer__about">
+        KrAIken is a project by <u><a href="https://sovraigns.network/" target="_blank">SovrAIgns.network</a></u
+        >.<br />
+        Autonomous liquidity protocol. Use at your own risk.
+      </div>
     </div>
   </footer>
 </template>
 
+<script setup lang="ts">
+const krkAddress = import.meta.env.VITE_KRAIKEN_ADDRESS || '';
+const stakeAddress = import.meta.env.VITE_STAKE_ADDRESS || '';
+
+function shortAddress(addr: string): string {
+  if (!addr || addr.length < 10) return addr;
+  return `${addr.slice(0, 6)}…${addr.slice(-4)}`;
+}
+</script>
+
 <style lang="sass">
 .k-footer
     font-size: 14px
@@ -18,4 +42,37 @@
         color: #F0F0F0
     @media (min-width: 992px)
         font-size: 16px
+
+.k-footer__contracts
+    margin-bottom: 24px
+    padding: 16px
+    background: rgba(255, 255, 255, 0.05)
+    border-radius: 8px
+    text-align: center
+
+.k-footer__contracts-title
+    font-weight: 600
+    margin-bottom: 8px
+    font-size: 13px
+    text-transform: uppercase
+    letter-spacing: 1px
+    color: #9A9898
+
+.k-footer__contracts-list
+    display: flex
+    gap: 24px
+    justify-content: center
+    flex-wrap: wrap
+    a
+        font-family: monospace
+        font-size: 13px
+        color: #7550AE
+        text-decoration: none
+        &:hover
+            text-decoration: underline
+
+.k-footer__audit-note
+    margin-top: 8px
+    font-size: 12px
+    color: #9A9898
 </style>
diff --git a/landing/src/components/WalletCard.vue b/landing/src/components/WalletCard.vue
index 158bed7..ed510fe 100644
--- a/landing/src/components/WalletCard.vue
+++ b/landing/src/components/WalletCard.vue
@@ -73,7 +73,7 @@ const pnlPercent = computed(() => {
 
 const pnlClass = computed(() => (pnlPercent.value >= 0 ? 'positive' : 'negative'));
 
-const appUrl = computed(() => `/app/#/wallet/${address.value}`);
+const appUrl = computed(() => `/app/wallet/${address.value}`);
 </script>
 
 <template>
diff --git a/landing/src/views/docs/TokenomicsDocs.vue b/landing/src/views/docs/TokenomicsDocs.vue
index 540a376..7936228 100644
--- a/landing/src/views/docs/TokenomicsDocs.vue
+++ b/landing/src/views/docs/TokenomicsDocs.vue
@@ -128,7 +128,7 @@
       When the price moves up, the LM rebalances by allocating more ETH to the Floor position and expanding Discovery. To support this
       growth, new $KRK tokens are minted. Conversely, when the price moves down, the LM shrinks the Floor and Discovery positions
       proportionally and burns excess tokens. For more details, see the
-      <a href="#/docs/Liquidity-Management">Liquidity Management</a> section.
+      <a href="/docs/Liquidity-Management">Liquidity Management</a> section.
     </p>
 
     <h2>Protocol Initialization</h2>
diff --git a/tests/e2e/01-acquire-and-stake.spec.ts b/tests/e2e/01-acquire-and-stake.spec.ts
index 60d87e2..92c9f19 100644
--- a/tests/e2e/01-acquire-and-stake.spec.ts
+++ b/tests/e2e/01-acquire-and-stake.spec.ts
@@ -2,6 +2,7 @@ import { expect, test, type APIRequestContext } from '@playwright/test';
 import { Wallet } from 'ethers';
 import { createWalletContext } from '../setup/wallet-provider';
 import { getStackConfig, validateStackHealthy } from '../setup/stack';
+import { navigateSPA } from '../setup/navigate';
 
 const ACCOUNT_PRIVATE_KEY = '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80';
 const ACCOUNT_ADDRESS = new Wallet(ACCOUNT_PRIVATE_KEY).address.toLowerCase();
@@ -152,8 +153,8 @@ test.describe('Acquire & Stake', () => {
       console.log('[TEST] Stack version footer verified.');
 
       console.log('[TEST] Navigating to cheats page...');
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/cheats`);
-      await expect(page.getByRole('heading', { name: 'Cheat Console' })).toBeVisible();
+      await navigateSPA(page, '/app/cheats');
+      await expect(page.getByRole('heading', { name: 'Cheat Console' })).toBeVisible({ timeout: 10_000 });
 
       console.log('[TEST] Minting test ETH...');
       await page.getByLabel('RPC URL').fill(STACK_RPC_URL);
@@ -217,7 +218,7 @@ test.describe('Acquire & Stake', () => {
 
       // Now test staking via UI
       console.log('[TEST] Navigating to stake page...');
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await navigateSPA(page, '/app/stake');
       await page.waitForTimeout(2_000);
 
       // Wait for the stake form to be initialized
diff --git a/tests/e2e/02-max-stake-all-tax-rates.spec.ts b/tests/e2e/02-max-stake-all-tax-rates.spec.ts
index a78eb77..412eb34 100644
--- a/tests/e2e/02-max-stake-all-tax-rates.spec.ts
+++ b/tests/e2e/02-max-stake-all-tax-rates.spec.ts
@@ -2,6 +2,7 @@ import { expect, test, type APIRequestContext } from '@playwright/test';
 import { Wallet } from 'ethers';
 import { createWalletContext } from '../setup/wallet-provider';
 import { getStackConfig, validateStackHealthy } from '../setup/stack';
+import { navigateSPA } from '../setup/navigate';
 import { TAX_RATE_OPTIONS } from '../../kraiken-lib/src/taxRates';
 
 const ACCOUNT_PRIVATE_KEY = '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80';
@@ -163,8 +164,8 @@ test.describe('Max Stake All Tax Rates', () => {
 
       // Step 1: Mint test ETH
       console.log('[TEST] Navigating to cheats page...');
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/cheats`);
-      await expect(page.getByRole('heading', { name: 'Cheat Console' })).toBeVisible();
+      await navigateSPA(page, '/app/cheats');
+      await expect(page.getByRole('heading', { name: 'Cheat Console' })).toBeVisible({ timeout: 10_000 });
 
       console.log('[TEST] Minting test ETH (10 ETH)...');
       await page.getByLabel('RPC URL').fill(STACK_RPC_URL);
@@ -217,7 +218,7 @@ test.describe('Max Stake All Tax Rates', () => {
 
       // Step 3: Navigate to stake page
       console.log('[TEST] Navigating to stake page...');
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await navigateSPA(page, '/app/stake');
       await page.waitForTimeout(2_000);
 
       const tokenAmountSlider = page.getByRole('slider', { name: 'Token Amount' });
diff --git a/tests/e2e/03-verify-graphql-url.spec.ts b/tests/e2e/03-verify-graphql-url.spec.ts
index 2dd2a28..50b9a4e 100644
--- a/tests/e2e/03-verify-graphql-url.spec.ts
+++ b/tests/e2e/03-verify-graphql-url.spec.ts
@@ -55,7 +55,7 @@ test.describe('GraphQL URL Verification', () => {
 
     try {
       console.log('[TEST] Navigating to staking page...');
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`, { waitUntil: 'domcontentloaded' });
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`, { waitUntil: 'domcontentloaded' });
 
       // Wait for page to fully load and settle
       await page.waitForLoadState('networkidle');
diff --git a/tests/e2e/06-dashboard-pages.spec.ts b/tests/e2e/06-dashboard-pages.spec.ts
index 7b5a607..ab47ba6 100644
--- a/tests/e2e/06-dashboard-pages.spec.ts
+++ b/tests/e2e/06-dashboard-pages.spec.ts
@@ -80,7 +80,7 @@ test.describe('Dashboard Pages', () => {
       });
 
       try {
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/wallet/${ACCOUNT_ADDRESS}`, {
+        await page.goto(`${STACK_WEBAPP_URL}/app/wallet/${ACCOUNT_ADDRESS}`, {
           waitUntil: 'domcontentloaded',
         });
         await page.waitForLoadState('networkidle');
@@ -143,7 +143,7 @@ test.describe('Dashboard Pages', () => {
       const page = await context.newPage();
 
       try {
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/wallet/${ACCOUNT_ADDRESS}`, {
+        await page.goto(`${STACK_WEBAPP_URL}/app/wallet/${ACCOUNT_ADDRESS}`, {
           waitUntil: 'domcontentloaded',
         });
         await page.waitForLoadState('networkidle');
@@ -174,7 +174,7 @@ test.describe('Dashboard Pages', () => {
       try {
         // Navigate to a wallet with no balance
         const unknownAddr = '0x0000000000000000000000000000000000000001';
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/wallet/${unknownAddr}`, {
+        await page.goto(`${STACK_WEBAPP_URL}/app/wallet/${unknownAddr}`, {
           waitUntil: 'domcontentloaded',
         });
         await page.waitForLoadState('networkidle');
@@ -224,7 +224,7 @@ test.describe('Dashboard Pages', () => {
       });
 
       try {
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/position/${positionId}`, {
+        await page.goto(`${STACK_WEBAPP_URL}/app/position/${positionId}`, {
           waitUntil: 'domcontentloaded',
         });
         await page.waitForLoadState('networkidle');
@@ -297,7 +297,7 @@ test.describe('Dashboard Pages', () => {
       });
 
       try {
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/position/999999999`, {
+        await page.goto(`${STACK_WEBAPP_URL}/app/position/999999999`, {
           waitUntil: 'domcontentloaded',
         });
         await page.waitForLoadState('networkidle');
@@ -340,7 +340,7 @@ test.describe('Dashboard Pages', () => {
       const page = await context.newPage();
 
       try {
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/position/${positionId}`, {
+        await page.goto(`${STACK_WEBAPP_URL}/app/position/${positionId}`, {
           waitUntil: 'domcontentloaded',
         });
         await page.waitForLoadState('networkidle');
diff --git a/tests/e2e/usertest/alex-newcomer.spec.ts b/tests/e2e/usertest/alex-newcomer.spec.ts
index 1f7b86a..c2b71d6 100644
--- a/tests/e2e/usertest/alex-newcomer.spec.ts
+++ b/tests/e2e/usertest/alex-newcomer.spec.ts
@@ -101,7 +101,7 @@ test.describe('Alex Rivera - Crypto-Curious Newcomer', () => {
       
       // --- Navigate to Stake Page to Learn ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(3_000);
       recordPageVisit('Stake (learning)', page.url(), pageStart, report);
       
@@ -143,7 +143,7 @@ test.describe('Alex Rivera - Crypto-Curious Newcomer', () => {
       logObservation(personaName, 'I need to get some tokens first... let me figure out how', report);
       
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/cheats`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/cheats`);
       await page.waitForTimeout(2_000);
       recordPageVisit('Cheats (confused)', page.url(), pageStart, report);
       
@@ -178,7 +178,7 @@ test.describe('Alex Rivera - Crypto-Curious Newcomer', () => {
       
       // --- Navigate to Stake (Intimidated) ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(2_000);
       recordPageVisit('Stake (attempting)', page.url(), pageStart, report);
       
@@ -212,7 +212,7 @@ test.describe('Alex Rivera - Crypto-Curious Newcomer', () => {
       await page.waitForTimeout(3_000);
       
       // --- Check for Progress Indicators ---
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(2_000);
       await takeScreenshot(page, personaName, 'looking-for-my-position', report);
       
diff --git a/tests/e2e/usertest/all-personas.spec.ts b/tests/e2e/usertest/all-personas.spec.ts
index c847d28..d3e8771 100644
--- a/tests/e2e/usertest/all-personas.spec.ts
+++ b/tests/e2e/usertest/all-personas.spec.ts
@@ -112,7 +112,7 @@ test.describe('All Personas - Fresh Pool State', () => {
         console.log(`[${persona.shortName}] ✅ Wallet connected`);
 
         // 3. Mint ETH
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/cheats`);
+        await page.goto(`${STACK_WEBAPP_URL}/app/cheats`);
         await page.waitForTimeout(1_000);
         await mintEth(page, STACK_RPC_URL, address, persona.ethToMint);
         await takeScreenshot(page, persona.shortName, '3-eth-minted', report);
@@ -128,7 +128,7 @@ test.describe('All Personas - Fresh Pool State', () => {
         await page.waitForTimeout(2_000);
 
         // 5. Navigate to stake page
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+        await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
         await page.waitForTimeout(3_000);
         await takeScreenshot(page, persona.shortName, '5-stake-page', report);
 
@@ -142,7 +142,7 @@ test.describe('All Personas - Fresh Pool State', () => {
         await page.waitForTimeout(2_000);
 
         // 7. Verify position exists
-        await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+        await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
         await page.waitForTimeout(2_000);
 
         const myPositionsSection = page.locator('.my-positions-list, [class*="my-position"], [class*="MyPosition"]').first();
diff --git a/tests/e2e/usertest/helpers.ts b/tests/e2e/usertest/helpers.ts
index f95738d..ef4e4f2 100644
--- a/tests/e2e/usertest/helpers.ts
+++ b/tests/e2e/usertest/helpers.ts
@@ -511,7 +511,7 @@ export async function attemptStake(
   console.log(`[${personaName}] Attempting to stake ${amount} KRK at tax rate ${taxRateIndex}%...`);
   
   const baseUrl = page.url().split('#')[0];
-  await page.goto(`${baseUrl}#/stake`);
+  await page.goto(`${baseUrl}stake`);
   
   // Wait longer for page to load and stats to initialize
   await page.waitForTimeout(3_000);
diff --git a/tests/e2e/usertest/marcus-degen.spec.ts b/tests/e2e/usertest/marcus-degen.spec.ts
index 16c4c34..5aab791 100644
--- a/tests/e2e/usertest/marcus-degen.spec.ts
+++ b/tests/e2e/usertest/marcus-degen.spec.ts
@@ -86,7 +86,7 @@ test.describe('Marcus "Flash" Chen - Degen/MEV Hunter', () => {
       
       // --- Mint ETH (Cheats) ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/cheats`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/cheats`);
       await page.waitForTimeout(1_000);
       recordPageVisit('Cheats', page.url(), pageStart, report);
       
@@ -123,7 +123,7 @@ test.describe('Marcus "Flash" Chen - Degen/MEV Hunter', () => {
       
       // --- Navigate to Stake Page ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(4_000);
       recordPageVisit('Stake', page.url(), pageStart, report);
       
@@ -149,7 +149,7 @@ test.describe('Marcus "Flash" Chen - Degen/MEV Hunter', () => {
       // --- Try to Snatch Another Position (if visible) ---
       logObservation(personaName, 'Scrolling through active positions looking for snatch targets...', report);
       
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(2_000);
       await takeScreenshot(page, personaName, 'looking-for-snatch-targets', report);
       
@@ -166,7 +166,7 @@ test.describe('Marcus "Flash" Chen - Degen/MEV Hunter', () => {
       
       // --- Check Statistics ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(1_000);
       
       const statsVisible = await page.getByText('Statistics').isVisible().catch(() => false);
diff --git a/tests/e2e/usertest/priya-institutional.spec.ts b/tests/e2e/usertest/priya-institutional.spec.ts
index b8a580b..4564b5d 100644
--- a/tests/e2e/usertest/priya-institutional.spec.ts
+++ b/tests/e2e/usertest/priya-institutional.spec.ts
@@ -99,7 +99,7 @@ test.describe('Dr. Priya Malhotra - Institutional/Analytical Investor', () => {
       
       // --- Examine Stake Page Statistics ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(3_000);
       recordPageVisit('Stake (analysis)', page.url(), pageStart, report);
       
@@ -109,7 +109,7 @@ test.describe('Dr. Priya Malhotra - Institutional/Analytical Investor', () => {
       
       // --- Examine Three-Position Liquidity Claim ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/cheats`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/cheats`);
       await page.waitForTimeout(2_000);
       recordPageVisit('Cheats (liquidity analysis)', page.url(), pageStart, report);
       
@@ -157,7 +157,7 @@ test.describe('Dr. Priya Malhotra - Institutional/Analytical Investor', () => {
       
       // --- Navigate to Stake for Optimal Tax Rate Analysis ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(2_000);
       recordPageVisit('Stake (optimization)', page.url(), pageStart, report);
       
@@ -192,7 +192,7 @@ test.describe('Dr. Priya Malhotra - Institutional/Analytical Investor', () => {
       await page.waitForTimeout(3_000);
       
       // --- Review Position Management Interface ---
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(2_000);
       await takeScreenshot(page, personaName, 'position-management', report);
       
diff --git a/tests/e2e/usertest/sarah-yield-farmer.spec.ts b/tests/e2e/usertest/sarah-yield-farmer.spec.ts
index 663eb37..60354f3 100644
--- a/tests/e2e/usertest/sarah-yield-farmer.spec.ts
+++ b/tests/e2e/usertest/sarah-yield-farmer.spec.ts
@@ -91,7 +91,7 @@ test.describe('Sarah Park - Cautious Yield Farmer', () => {
       
       // --- Navigate to Stake Page to Learn ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(3_000);
       recordPageVisit('Stake (research)', page.url(), pageStart, report);
       
@@ -115,7 +115,7 @@ test.describe('Sarah Park - Cautious Yield Farmer', () => {
       
       // --- Mint ETH ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/cheats`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/cheats`);
       await page.waitForTimeout(1_000);
       recordPageVisit('Cheats', page.url(), pageStart, report);
       
@@ -142,7 +142,7 @@ test.describe('Sarah Park - Cautious Yield Farmer', () => {
       
       // --- Navigate Back to Stake ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(2_000);
       recordPageVisit('Stake (attempt)', page.url(), pageStart, report);
       
@@ -169,7 +169,7 @@ test.describe('Sarah Park - Cautious Yield Farmer', () => {
       await page.waitForTimeout(3_000);
       
       // --- Check Active Positions ---
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(2_000);
       await takeScreenshot(page, personaName, 'checking-my-position', report);
       
diff --git a/tests/e2e/usertest/test-b-staker-v2.spec.ts b/tests/e2e/usertest/test-b-staker-v2.spec.ts
index 54e8f9b..e3223a9 100644
--- a/tests/e2e/usertest/test-b-staker-v2.spec.ts
+++ b/tests/e2e/usertest/test-b-staker-v2.spec.ts
@@ -27,7 +27,7 @@ import { execSync } from 'child_process';
 
 const STACK_CONFIG = getStackConfig();
 const STACK_RPC_URL = STACK_CONFIG.rpcUrl;
-const STAKE_PAGE_URL = `${STACK_CONFIG.webAppUrl}/app/#/stake`;
+const STAKE_PAGE_URL = `${STACK_CONFIG.webAppUrl}/app/stake`;
 
 // Anvil test account keys
 const MARCUS_KEY = '0x7c852118294e51e653712a81e05800f419141751be58f605c371e15141b007a6'; // Anvil #3
diff --git a/tests/e2e/usertest/test-b-staker.spec.ts b/tests/e2e/usertest/test-b-staker.spec.ts
index 35e3267..23984c4 100644
--- a/tests/e2e/usertest/test-b-staker.spec.ts
+++ b/tests/e2e/usertest/test-b-staker.spec.ts
@@ -18,7 +18,7 @@ import { join } from 'path';
 const STACK_CONFIG = getStackConfig();
 const STACK_RPC_URL = STACK_CONFIG.rpcUrl;
 const STACK_WEBAPP_URL = STACK_CONFIG.webAppUrl;
-const STAKE_PAGE_URL = 'http://localhost:5173/#/stake';
+const STAKE_PAGE_URL = 'http://localhost:5173/stake';
 
 // Different accounts for different personas
 const MARCUS_KEY = '0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80'; // Anvil #0
diff --git a/tests/e2e/usertest/tyler-retail-degen.spec.ts b/tests/e2e/usertest/tyler-retail-degen.spec.ts
index 21fa320..e961c02 100644
--- a/tests/e2e/usertest/tyler-retail-degen.spec.ts
+++ b/tests/e2e/usertest/tyler-retail-degen.spec.ts
@@ -80,7 +80,7 @@ test.describe('Tyler "Bags" Morrison - Retail Degen', () => {
       
       // --- Navigate to Cheats (Finds It Randomly) ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/cheats`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/cheats`);
       await page.waitForTimeout(1_000);
       recordPageVisit('Cheats', page.url(), pageStart, report);
       
@@ -118,7 +118,7 @@ test.describe('Tyler "Bags" Morrison - Retail Degen', () => {
       
       // --- Navigate to Stake (No Idea What He's Doing) ---
       pageStart = Date.now();
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(3_000);
       recordPageVisit('Stake', page.url(), pageStart, report);
       
@@ -145,7 +145,7 @@ test.describe('Tyler "Bags" Morrison - Retail Degen', () => {
       await page.waitForTimeout(3_000);
       
       // --- Checks for Immediate Gains ---
-      await page.goto(`${STACK_WEBAPP_URL}/app/#/stake`);
+      await page.goto(`${STACK_WEBAPP_URL}/app/stake`);
       await page.waitForTimeout(2_000);
       await takeScreenshot(page, personaName, 'checking-gains', report);
       
diff --git a/tests/setup/navigate.ts b/tests/setup/navigate.ts
new file mode 100644
index 0000000..2e43b5b
--- /dev/null
+++ b/tests/setup/navigate.ts
@@ -0,0 +1,17 @@
+import type { Page } from '@playwright/test';
+
+/**
+ * Navigate within the Vue SPA without a full page reload.
+ * Uses history.pushState + popstate to trigger Vue Router navigation,
+ * preserving wallet connection state and reactive stores.
+ *
+ * For initial page loads, use page.goto() instead.
+ */
+export async function navigateSPA(page: Page, path: string): Promise<void> {
+  await page.evaluate((p) => {
+    window.history.pushState({}, '', p);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  }, path);
+  // Give Vue Router time to resolve the route and render
+  await page.waitForTimeout(500);
+}
diff --git a/web-app/src/components/layouts/NavbarHeader.vue b/web-app/src/components/layouts/NavbarHeader.vue
index fa2340c..fe945af 100644
--- a/web-app/src/components/layouts/NavbarHeader.vue
+++ b/web-app/src/components/layouts/NavbarHeader.vue
@@ -17,7 +17,7 @@
             <RouterLink v-for="navbarRoute in navbarRoutes" :key="navbarRoute.name" :to="navbarRoute.path">
               {{ navbarRoute.title }}
             </RouterLink>
-            <a href="/#/docs">Docs</a>
+            <a href="/app/docs">Docs</a>
           </nav>
           <template v-if="!isMobile">
             <div class="vertical-line"></div>
diff --git a/web-app/src/layouts/NavbarLayout.vue b/web-app/src/layouts/NavbarLayout.vue
index 8395fc8..9cda7cf 100644
--- a/web-app/src/layouts/NavbarLayout.vue
+++ b/web-app/src/layouts/NavbarLayout.vue
@@ -46,7 +46,7 @@ provide('isMobile', isMobile);
 provide('showPanel', showPanel);
 
 function openDocs() {
-  window.open('https://emberspirit007.github.io/KraikenLanding/#/docs/Introduction');
+  window.open('/app/docs');
 }
 </script>
 
diff --git a/web-app/src/router/index.ts b/web-app/src/router/index.ts
index 6e25e4f..7e8516c 100644
--- a/web-app/src/router/index.ts
+++ b/web-app/src/router/index.ts
@@ -1,8 +1,10 @@
-import { createRouter, createWebHashHistory } from 'vue-router';
+import { createRouter, createWebHistory } from 'vue-router';
 import { authGuard } from './authGuard';
 
+const basePath = import.meta.env.VITE_BASE_PATH || '/app/';
+
 const router = createRouter({
-  history: createWebHashHistory(),
+  history: createWebHistory(basePath),
   routes: [
     {
       path: '/',