feat: Add dynamic MCP tool registration per page

- webmcp.ts: Add tool tracking, unregisterTool(), clearAllTools()
- tools/canvasTools.ts: render_html, render_vue_component
- tools/componentTools.ts: save/load/list/delete_vue_component
- tools/themeTools.ts: get_design_tokens, get_active_theme, set_theme_variable, save_theme
- tools/globalTools.ts: get_current_page, navigate_to, list_available_tools
- toolRegistry.ts: Orchestrates tool registration per page
- App.vue: Initializes WebMCP once, watches route for tool changes
- Canvas.vue: Removed tool registration (now handled by registry)

Tools are now registered when entering a page and unregistered when leaving.
Refresh initializes tools correctly for the current page.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/App.vue

@@ -1,8 +1,33 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { onMounted, 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 { initWebMCP } from './services/webmcp'
+import { initToolRegistry, activatePageTools, initToolsOnRefresh } from './services/toolRegistry'
+
+const route = useRoute()
+const router = useRouter()
+
+onMounted(async () => {
+  // Initialize WebMCP connection
+  await initWebMCP()
+
+  // Initialize tool registry with router
+  initToolRegistry(router)
+
+  // Initialize tools for current page (handles refresh)
+  const currentPage = (route.name as string) || 'canvas'
+  initToolsOnRefresh(currentPage as 'canvas' | 'components' | 'themes')
+})
+
+// Watch for route changes and update tools
+watch(() => route.name, (newPage) => {
+  if (newPage) {
+    activatePageTools(newPage as 'canvas' | 'components' | 'themes')
+  }
+})
 </script>
 
 <template>