diff --git a/webclient/package-lock.json b/webclient/package-lock.json
index 9b6ce06..69ea87e 100644
--- a/webclient/package-lock.json
+++ b/webclient/package-lock.json
@@ -13,6 +13,7 @@
         "marked": "^15.0.12",
         "pinia": "^3.0.2",
         "vue": "^3.5.13",
+        "vue-router": "^4.6.4",
         "vue-virtual-scroller": "^2.0.0-beta.8"
       },
       "devDependencies": {
@@ -3045,6 +3046,27 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-router": {
+      "version": "4.6.4",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.6.4.tgz",
+      "integrity": "sha512-Hz9q5sa33Yhduglwz6g9skT8OBPii+4bFn88w6J+J4MfEo4KRRpmiNG/hHHkdbRFlLBOqxN8y8gf2Fb0MTUgVg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/vue-router/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/vue-virtual-scroller": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-2.0.1.tgz",
diff --git a/webclient/package.json b/webclient/package.json
index 8c82494..4dd4ee9 100644
--- a/webclient/package.json
+++ b/webclient/package.json
@@ -15,6 +15,7 @@
     "marked": "^15.0.12",
     "pinia": "^3.0.2",
     "vue": "^3.5.13",
+    "vue-router": "^4.6.4",
     "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "devDependencies": {
diff --git a/webclient/src/App.vue b/webclient/src/App.vue
index 1871c40..0dd5c28 100644
--- a/webclient/src/App.vue
+++ b/webclient/src/App.vue
@@ -118,15 +118,6 @@
   }
 })
 
-// Legacy hash-based routing for session IDs that do NOT use the vue-router #/ prefix.
-window.addEventListener('hashchange', () => {
-  const hash = location.hash
-  if (hash.startsWith('#/')) return  // vue-router managed
-  const id = hash.slice(1)
-  if (id && id !== chatStore.currentId) {
-    chatStore.loadSession(id)
-  }
-})
 </script>
 
 <style scoped>
diff --git a/webclient/src/api/index.js b/webclient/src/api/index.js
index 904c607..73a3f4a 100644
--- a/webclient/src/api/index.js
+++ b/webclient/src/api/index.js
@@ -16,6 +16,20 @@
     opts.body = JSON.stringify(body)
   }
   const res = await fetch(`${BASE}${path}`, opts)
+
+  // 401 must surface immediately: invalidate local auth so the login overlay appears.
+  if (res.status === 401) {
+    try {
+      const { useAuthStore } = await import('@/stores/auth.js')
+      const auth = useAuthStore()
+      auth.user = null
+    } catch {
+      // Pinia not ready — ignore, the login overlay won't appear but the error still throws
+    }
+    const text = await res.text().catch(() => '')
+    throw new Error(`${method} ${path} → 401: ${text}`)
+  }
+
   if (!res.ok) {
     const text = await res.text().catch(() => '')
     throw new Error(`${method} ${path} → ${res.status}: ${text}`)
diff --git a/webclient/src/components/ui/WelcomeScreen.vue b/webclient/src/components/ui/WelcomeScreen.vue
index 3037757..d10f86f 100644
--- a/webclient/src/components/ui/WelcomeScreen.vue
+++ b/webclient/src/components/ui/WelcomeScreen.vue
@@ -71,6 +71,8 @@
     profilesStore.selectedProfileId = selectedId.value
     const session = await sessionsStore.createSession(selectedId.value)
     await chatStore.loadSession(session.session_id)
+  } catch (err) {
+    console.error('[welcome] start failed', err)
   } finally {
     creating.value = false
   }
diff --git a/webclient/src/router/index.js b/webclient/src/router/index.js
index 2c9d8e1..97d3220 100644
--- a/webclient/src/router/index.js
+++ b/webclient/src/router/index.js
@@ -2,7 +2,7 @@
 import HomeView from '@/views/HomeView.vue'
 
 const routes = [
-  { path: '/', component: HomeView },
+  { path: '/:sessionId?', component: HomeView },
 ]
 
 export const router = createRouter({
diff --git a/webclient/src/stores/chat.js b/webclient/src/stores/chat.js
index f23a037..dfa6b37 100644
--- a/webclient/src/stores/chat.js
+++ b/webclient/src/stores/chat.js
@@ -37,6 +37,7 @@
 
   async function loadSession(id) {
     if (currentId.value === id) return
+    console.log('[chat] loadSession start', id)
     _lastLoadId = id
     loading.value = true
     messages.value = []
@@ -48,10 +49,12 @@
 
     try {
       const session = await api.getSession(id)
+      console.log('[chat] loadSession got session', session?.session_id, 'messages count', session?.messages?.length)
       // Ignore stale responses — user may have switched to a different session while this loaded
       if (_lastLoadId !== id) return
       currentProfileId.value = session.profile_id ?? null
       messages.value = buildMessageList(session.messages ?? [])
+      console.log('[chat] loadSession built', messages.value.length, 'messages')
       await mergeFeedback(id)
       await fetchArtifacts(id)
       if (session.context_token_count) contextTokens.value = session.context_token_count
@@ -60,7 +63,10 @@
       // watch in ChatArea. Doing it last guarantees messages are populated before WS replay
       // starts, eliminating the race where WS replay arrives before REST and gets overwritten.
       currentId.value = id
-      location.hash = id
+      location.hash = '#/' + id
+      console.log('[chat] loadSession done, currentId set to', id)
+    } catch (err) {
+      console.error('[chat] loadSession failed', err)
     } finally {
       loading.value = false
     }
@@ -75,7 +81,7 @@
     streamingMsg.value = null
     contextTokens.value = 0
     maxContextTokens.value = 0
-    location.hash = ''
+    location.hash = '#/'
   }
 
   // Force-reload session history from the server, bypassing the same-id guard.
@@ -427,6 +433,7 @@
   //
   // We group them into single AssistantMessage objects with tools[] + text.
   function buildMessageList(raw) {
+    console.log('[chat] buildMessageList raw length', raw.length)
     const result = []
     let i = 0
 
diff --git a/webclient/src/views/HomeView.vue b/webclient/src/views/HomeView.vue
index f88fce3..a55540c 100644
--- a/webclient/src/views/HomeView.vue
+++ b/webclient/src/views/HomeView.vue
@@ -15,12 +15,14 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import { useSessionsStore } from '@/stores/sessions'
 import { useChatStore } from '@/stores/chat'
 import WelcomeScreen from '@/components/ui/WelcomeScreen.vue'
 import ChatArea from '@/components/chat/ChatArea.vue'
 
+const route = useRoute()
 const sessionsStore = useSessionsStore()
 const chatStore = useChatStore()
 
@@ -29,4 +31,15 @@
 const showWelcome = computed(
   () => (sessionsStore.sessions.length === 0 || chatStore.currentId === null) && !sessionsStore.loading
 )
+
+// Load session from URL route param (replaces the old raw hashchange handler)
+watch(
+  () => route.params.sessionId,
+  (id) => {
+    if (id && id !== chatStore.currentId) {
+      chatStore.loadSession(id)
+    }
+  },
+  { immediate: true }
+)
 </script>