feat: Improve WebMCP connection handling and tools management

WebMCP service:
- Add headless mode configuration
- Implement proper event handlers with unsubscribe support
- Add connection info tracking (channel, server, status, tools)
- Add destroyWebMCP for cleanup
- Improve connectWithToken to pass token directly

Canvas store:
- Add connection state (reconnecting, status, error, info)
- Add computed statusColor for UI feedback

Components:
- Add ConnectionDropdown for connection status display
- Add ToolsDropdown for tools management UI

Tool registry:
- Improve tool activation/deactivation logic
- Better error handling and logging

frontend/src/services/toolRegistry.ts

@@ -23,7 +23,7 @@ import {
 } from './tools/handlers'
 import { setRouter } from './tools/handlers/globalHandlers'
 import { setGiteaCredentials, clearGiteaCredentials } from './tools/handlers/sourceCodeHandlers'
-import { ALL_TOOL_METAS, type ToolCategory } from './tools/toolDefinitions'
+import { ALL_TOOL_METAS, getAllToolNames, type ToolCategory } from './tools/toolDefinitions'
 
 export type PageName = 'home' | 'canvas' | 'components' | 'themes' | 'projects' | 'project-canvas' | 'database' | 'source' | 'terminal' | 'tools'
 
@@ -75,9 +75,37 @@ function getToolConfigs(): Map<string, ToolConfig> {
 
   toolConfigsCache = new Map()
 
+  // Create callbacks for global handlers
+  const toolManagementCallbacks = {
+    getRegisteredTools: () => Array.from(registeredToolsSet),
+    getAllToolNames: () => getAllToolNames(),
+    activateTool: async (name: string) => {
+      const config = toolConfigsCache?.get(name)
+      if (!config) return false
+      const result = await internalRegisterTool(config)
+      syncStoreWithActiveTools()
+      return result
+    },
+    deactivateTool: (name: string) => {
+      const toolsStore = useToolsStore()
+      if (toolsStore.isToolPinned(name)) return false
+      const result = internalUnregisterTool(name)
+      syncStoreWithActiveTools()
+      return result
+    },
+    togglePin: (name: string) => {
+      const toolsStore = useToolsStore()
+      toolsStore.togglePin(name)
+    },
+    isToolPinned: (name: string) => {
+      const toolsStore = useToolsStore()
+      return toolsStore.isToolPinned(name)
+    }
+  }
+
   // Create all handlers
   const allHandlers = [
-    ...createGlobalHandlers(() => Array.from(registeredToolsSet)),
+    ...createGlobalHandlers(toolManagementCallbacks),
     ...createCanvasHandlers(),
     ...createComponentHandlers(),
     ...createThemeHandlers(),
@@ -95,7 +123,7 @@ function getToolConfigs(): Map<string, ToolConfig> {
 
 // Category to tool names mapping
 const categoryTools: Record<ToolCategory, string[]> = {
-  global: ['get_current_page', 'navigate_to', 'list_available_tools'],
+  global: ['get_current_page', 'navigate_to', 'list_available_tools', 'activate_tool', 'deactivate_tool', 'pin_tool'],
   canvas: ['render_html', 'render_vue_component'],
   component: ['save_vue_component', 'load_vue_component', 'list_vue_components', 'delete_vue_component'],
   theme: ['get_design_tokens', 'get_active_theme', 'set_theme_variable', 'save_theme', 'list_themes', 'switch_theme', 'reset_theme'],