From e51eb6749db0399acd6e4afe71657b7e06de1f93 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 14 Feb 2026 03:28:29 -0600
Subject: [PATCH] feat: Add hard refresh button and fix webmcp token URL

- Add refresh button to header bar for hard page reload
- Fix duplicate /api prefix in webmcp token endpoint
---
 frontend/src/App.vue            | 35 +++++++++++++++++++++++++++++++++
 frontend/src/services/webmcp.ts |  4 ++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5b561c3..8464faa 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -46,6 +46,10 @@ let sessionStartTimeout: number | null = null
 let notificationTimeout: number | null = null
 let toolFlashTimeout: number | null = null
 
+function hardRefresh() {
+  location.reload()
+}
+
 function connectStatusWs() {
   if (statusWs?.readyState === WebSocket.OPEN) return
 
@@ -266,6 +270,12 @@ watch(() => route.name, (newPage) => {
         <ToolsDropdown />
         <PwaInstallBanner />
       </div>
+      <button class="refresh-btn" @click="hardRefresh" title="Hard refresh (Ctrl+F5)">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/>
+          <path d="M21 3v5h-5"/>
+        </svg>
+      </button>
       <StatusBar />
     </header>
     <main class="app-main">
@@ -420,6 +430,31 @@ watch(() => route.name, (newPage) => {
   margin: 0;
 }
 
+.refresh-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.refresh-btn:hover {
+  background: var(--bg-hover);
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+.refresh-btn:active {
+  transform: rotate(180deg);
+}
+
 .app-main {
   display: flex;
   flex: 1;
diff --git a/frontend/src/services/webmcp.ts b/frontend/src/services/webmcp.ts
index 89162bc..d87ddb3 100644
--- a/frontend/src/services/webmcp.ts
+++ b/frontend/src/services/webmcp.ts
@@ -223,7 +223,7 @@ export function isToolRegistered(name: string): boolean {
 // Token polling functions
 export async function checkForToken(): Promise<string | null> {
   try {
-    const res = await fetch(`${API_BASE}/api/webmcp-token`)
+    const res = await fetch(`${API_BASE}/webmcp-token`)
     const data = await res.json()
     return data.token || null
   } catch (e) {
@@ -233,7 +233,7 @@ export async function checkForToken(): Promise<string | null> {
 
 export async function clearToken(): Promise<void> {
   try {
-    await fetch(`${API_BASE}/api/webmcp-token`, { method: 'DELETE' })
+    await fetch(`${API_BASE}/webmcp-token`, { method: 'DELETE' })
   } catch (e) {
     // ignore
   }