feat: Add WebMCP token polling for automatic browser connection

- Add token API endpoint to server for storing/retrieving pending tokens
- Add token polling in frontend to auto-detect and connect with tokens
- Add xterm dependencies for terminal functionality
- Add terminal page support in toolRegistry

frontend/src/App.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import { RouterView, useRoute, useRouter } from 'vue-router'
 import StatusBar from './components/StatusBar.vue'
 import Toolbar from './components/Toolbar.vue'
 import ComponentsDropdown from './components/ComponentsDropdown.vue'
 import FloatingTerminal from './components/FloatingTerminal.vue'
-import { initWebMCP } from './services/webmcp'
+import { initWebMCP, getWebMCP, startTokenPolling, stopTokenPolling, connectWithToken } from './services/webmcp'
 import { initToolRegistry, activatePageTools, initToolsOnRefresh } from './services/toolRegistry'
+import { useCanvasStore } from './stores/canvas'
 
 const route = useRoute()
 const router = useRouter()
 const showTerminal = ref(false)
+const canvasStore = useCanvasStore()
 
 type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'projects' | 'project-canvas' | 'database' | 'source' | 'terminal'
 
@@ -24,6 +26,22 @@ onMounted(async () => {
   // Initialize tools for current page (handles refresh)
   const currentPage = (route.name as string) || 'canvas'
   initToolsOnRefresh(currentPage as PageName)
+
+  // Start polling for token if not connected
+  const webmcp = getWebMCP()
+  if (!webmcp?.isConnected) {
+    startTokenPolling(async (token) => {
+      console.log('[App] Token received, connecting...')
+      const success = await connectWithToken(token)
+      if (success) {
+        canvasStore.showNotification('WebMCP connected!', 'success')
+      }
+    })
+  }
+})
+
+onUnmounted(() => {
+  stopTokenPolling()
 })
 
 // Watch for route changes and update tools