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/stores/canvas.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 interface HistoryEntry {
   tool: string
@@ -14,16 +14,60 @@ interface Notification {
   duration: number
 }
 
+interface ConnectionInfo {
+  isConnected: boolean
+  channel: string | null
+  server: string | null
+  status: string
+  tools: string[]
+  prompts: string[]
+  resources: string[]
+}
+
 export const useCanvasStore = defineStore('canvas', () => {
+  // Connection state
   const isConnected = ref(false)
+  const isReconnecting = ref(false)
+  const connectionStatus = ref<string>('disconnected')
+  const connectionError = ref<string | null>(null)
+  const connectionInfo = ref<ConnectionInfo | null>(null)
+
   const history = ref<HistoryEntry[]>([])
   const notifications = ref<Notification[]>([])
   const showHistoryPanel = ref(false)
 
   let notificationId = 0
 
+  // Computed
+  const statusColor = computed(() => {
+    if (isReconnecting.value) return 'warning'
+    if (isConnected.value) return 'success'
+    if (connectionError.value) return 'error'
+    return 'muted'
+  })
+
   function setConnected(connected: boolean) {
     isConnected.value = connected
+    if (connected) {
+      isReconnecting.value = false
+      connectionError.value = null
+    }
+  }
+
+  function setReconnecting(reconnecting: boolean) {
+    isReconnecting.value = reconnecting
+  }
+
+  function setConnectionStatus(status: string) {
+    connectionStatus.value = status
+  }
+
+  function setConnectionError(error: string | null) {
+    connectionError.value = error
+  }
+
+  function setConnectionInfo(info: ConnectionInfo | null) {
+    connectionInfo.value = info
   }
 
   function addToHistory(entry: HistoryEntry) {
@@ -60,11 +104,23 @@ export const useCanvasStore = defineStore('canvas', () => {
   }
 
   return {
+    // Connection state
     isConnected,
+    isReconnecting,
+    connectionStatus,
+    connectionError,
+    connectionInfo,
+    statusColor,
+    // History & UI
     history,
     notifications,
     showHistoryPanel,
+    // Actions
     setConnected,
+    setReconnecting,
+    setConnectionStatus,
+    setConnectionError,
+    setConnectionInfo,
     addToHistory,
     clearHistory,
     showNotification,