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/components/ConnectionDropdown.vue

@@ -0,0 +1,363 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useCanvasStore } from '../stores/canvas'
+import { connectWithToken, getConnectionInfo } from '../services/webmcp'
+
+const canvasStore = useCanvasStore()
+const { isConnected, isReconnecting, connectionStatus, connectionInfo } = storeToRefs(canvasStore)
+
+const isOpen = ref(false)
+const tokenInput = ref('')
+const isConnecting = ref(false)
+
+const statusText = computed(() => {
+  if (isReconnecting.value) return 'Reconnecting...'
+  if (isConnected.value) return 'Connected'
+  return 'Disconnected'
+})
+
+const statusClass = computed(() => {
+  if (isReconnecting.value) return 'warning'
+  if (isConnected.value) return 'success'
+  return 'error'
+})
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value
+}
+
+function closeDropdown(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.connection-dropdown-container')) {
+    isOpen.value = false
+  }
+}
+
+async function handleConnect() {
+  if (!tokenInput.value.trim()) return
+
+  isConnecting.value = true
+  try {
+    const success = await connectWithToken(tokenInput.value.trim())
+    if (success) {
+      tokenInput.value = ''
+      canvasStore.showNotification('Connecting to WebMCP...', 'info')
+    } else {
+      canvasStore.showNotification('Invalid token', 'error')
+    }
+  } catch (e: any) {
+    canvasStore.showNotification(e.message || 'Connection failed', 'error')
+  } finally {
+    isConnecting.value = false
+  }
+}
+
+async function handlePaste() {
+  try {
+    const text = await navigator.clipboard.readText()
+    tokenInput.value = text
+  } catch {
+    // Clipboard access denied
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeDropdown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeDropdown)
+})
+</script>
+
+<template>
+  <div class="connection-dropdown-container">
+    <button class="dropdown-trigger" @click.stop="toggleDropdown" title="WebMCP Connection">
+      <span class="status-dot" :class="statusClass"></span>
+      <span>MCP</span>
+      <svg class="chevron" :class="{ open: isOpen }" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="6 9 12 15 18 9"/>
+      </svg>
+    </button>
+
+    <div v-if="isOpen" class="dropdown-menu" @click.stop>
+      <div class="dropdown-header">
+        <span class="header-title">WebMCP</span>
+        <span class="status-badge" :class="statusClass">{{ statusText }}</span>
+      </div>
+
+      <!-- Disconnected: Show token input -->
+      <div v-if="!isConnected" class="connect-section">
+        <p class="connect-hint">Paste the token from Claude Code:</p>
+        <div class="token-input-group">
+          <input
+            v-model="tokenInput"
+            type="text"
+            placeholder="eyJ..."
+            class="token-input"
+            @keyup.enter="handleConnect"
+          />
+          <button class="paste-btn" @click="handlePaste" title="Paste from clipboard">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+            </svg>
+          </button>
+        </div>
+        <button
+          class="connect-btn"
+          @click="handleConnect"
+          :disabled="!tokenInput.trim() || isConnecting"
+        >
+          {{ isConnecting ? 'Connecting...' : 'Connect' }}
+        </button>
+      </div>
+
+      <!-- Connected: Show connection info -->
+      <div v-else class="info-section">
+        <div v-if="connectionInfo" class="info-grid">
+          <div class="info-item">
+            <span class="info-label">Channel</span>
+            <span class="info-value">{{ connectionInfo.channel || '-' }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">Server</span>
+            <span class="info-value">{{ connectionInfo.server || '-' }}</span>
+          </div>
+          <div class="info-item">
+            <span class="info-label">Tools</span>
+            <span class="info-value">{{ connectionInfo.tools?.length || 0 }} registered</span>
+          </div>
+        </div>
+        <div v-else class="info-empty">
+          Connection active
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.connection-dropdown-container {
+  position: relative;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-hover);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.dropdown-trigger:hover {
+  background: var(--bg-tertiary, rgba(255,255,255,0.1));
+  color: var(--text-primary);
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-dot.success {
+  background: #10b981;
+  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
+}
+
+.status-dot.warning {
+  background: #f59e0b;
+  animation: pulse 1.5s infinite;
+}
+
+.status-dot.error {
+  background: #6b7280;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.chevron {
+  transition: transform 0.2s ease;
+}
+
+.chevron.open {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 260px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.dropdown-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.header-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+.status-badge {
+  font-size: 0.7rem;
+  font-weight: 500;
+  padding: 0.2rem 0.5rem;
+  border-radius: 9999px;
+}
+
+.status-badge.success {
+  background: rgba(16, 185, 129, 0.15);
+  color: #10b981;
+}
+
+.status-badge.warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+}
+
+.status-badge.error {
+  background: rgba(107, 114, 128, 0.15);
+  color: #9ca3af;
+}
+
+.connect-section {
+  padding: 1rem;
+}
+
+.connect-hint {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  margin: 0 0 0.75rem 0;
+}
+
+.token-input-group {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.token-input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-primary);
+  font-size: 0.8rem;
+  font-family: var(--font-mono);
+}
+
+.token-input:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.token-input::placeholder {
+  color: var(--text-muted);
+}
+
+.paste-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.paste-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--accent);
+}
+
+.connect-btn {
+  width: 100%;
+  padding: 0.6rem;
+  background: var(--accent);
+  border: none;
+  border-radius: 6px;
+  color: var(--accent-text);
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.connect-btn:hover:not(:disabled) {
+  background: var(--accent-hover);
+}
+
+.connect-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.info-section {
+  padding: 1rem;
+}
+
+.info-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.4rem 0;
+}
+
+.info-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.info-value {
+  font-size: 0.8rem;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+}
+
+.info-empty {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+  text-align: center;
+  padding: 0.5rem 0;
+}
+</style>

frontend/src/components/ToolsDropdown.vue

@@ -0,0 +1,391 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useToolsStore } from '../stores/tools'
+import {
+  activateCategory,
+  deactivateCategory,
+  syncStoreWithActiveTools
+} from '../services/toolRegistry'
+import { CATEGORY_INFO, type ToolCategory } from '../services/tools/toolDefinitions'
+
+const toolsStore = useToolsStore()
+const { activeTools, pinnedTools } = storeToRefs(toolsStore)
+const isOpen = ref(false)
+
+// Category to tools mapping
+const categoryTools: Record<ToolCategory, string[]> = {
+  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'],
+  database: ['list_tables', 'get_table_schema', 'get_table_data', 'get_database_stats', 'execute_query'],
+  source: ['get_repo_info', 'list_repo_files', 'read_repo_file', 'search_repo_code'],
+  project: ['list_canvases', 'create_canvas', 'get_canvas', 'update_canvas', 'delete_canvas', 'clone_canvas', 'add_component_to_canvas', 'remove_component_from_canvas', 'get_canvas_components']
+}
+
+const categories = computed(() => {
+  return Object.entries(CATEGORY_INFO).map(([key, info]) => {
+    const tools = categoryTools[key as ToolCategory]
+    const activeCount = tools.filter(t => activeTools.value.includes(t)).length
+    const pinnedCount = tools.filter(t => pinnedTools.value.includes(t)).length
+    const allPinned = tools.every(t => pinnedTools.value.includes(t))
+
+    return {
+      key: key as ToolCategory,
+      ...info,
+      tools,
+      activeCount,
+      totalCount: tools.length,
+      pinnedCount,
+      allPinned
+    }
+  })
+})
+
+const totalPinned = computed(() => pinnedTools.value.length)
+const totalActive = computed(() => activeTools.value.length)
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    syncStoreWithActiveTools()
+  }
+}
+
+function closeDropdown(e: MouseEvent) {
+  const target = e.target as HTMLElement
+  if (!target.closest('.tools-dropdown-container')) {
+    isOpen.value = false
+  }
+}
+
+async function handlePinCategory(category: ToolCategory) {
+  const tools = categoryTools[category]
+  const allPinned = tools.every(t => pinnedTools.value.includes(t))
+
+  if (allPinned) {
+    // Unpin all tools in category
+    for (const tool of tools) {
+      toolsStore.unpinTool(tool)
+    }
+  } else {
+    // Pin all tools in category and activate them
+    for (const tool of tools) {
+      toolsStore.pinTool(tool)
+    }
+    await activateCategory(category)
+  }
+  syncStoreWithActiveTools()
+}
+
+async function handleActivateCategory(category: ToolCategory) {
+  await activateCategory(category)
+  syncStoreWithActiveTools()
+}
+
+function handleDeactivateCategory(category: ToolCategory) {
+  deactivateCategory(category)
+  syncStoreWithActiveTools()
+}
+
+onMounted(() => {
+  document.addEventListener('click', closeDropdown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', closeDropdown)
+})
+</script>
+
+<template>
+  <div class="tools-dropdown-container">
+    <button class="dropdown-trigger" @click.stop="toggleDropdown" title="Herramientas MCP">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
+      </svg>
+      <span>Tools</span>
+      <span v-if="totalPinned > 0" class="badge">{{ totalPinned }}</span>
+      <svg class="chevron" :class="{ open: isOpen }" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="6 9 12 15 18 9"/>
+      </svg>
+    </button>
+
+    <div v-if="isOpen" class="dropdown-menu" @click.stop>
+      <div class="dropdown-header">
+        <span class="header-title">Tool Categories</span>
+        <span class="header-stats">{{ totalActive }} active</span>
+      </div>
+
+      <div class="categories-list">
+        <div
+          v-for="cat in categories"
+          :key="cat.key"
+          class="category-item"
+          :style="{ '--cat-color': cat.color }"
+        >
+          <div class="category-info">
+            <div class="category-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path :d="cat.icon"/>
+              </svg>
+            </div>
+            <div class="category-details">
+              <span class="category-name">{{ cat.label }}</span>
+              <span class="category-count">{{ cat.activeCount }}/{{ cat.totalCount }} active</span>
+            </div>
+          </div>
+
+          <div class="category-actions">
+            <button
+              class="action-btn pin-btn"
+              :class="{ pinned: cat.allPinned }"
+              @click="handlePinCategory(cat.key)"
+              :title="cat.allPinned ? 'Unpin category' : 'Pin category (keep active)'"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M12 17v5"/>
+                <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v4.76z"/>
+              </svg>
+            </button>
+            <button
+              class="action-btn activate-btn"
+              @click="handleActivateCategory(cat.key)"
+              title="Activate all"
+              :disabled="cat.activeCount === cat.totalCount"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="20 6 9 17 4 12"/>
+              </svg>
+            </button>
+            <button
+              class="action-btn deactivate-btn"
+              @click="handleDeactivateCategory(cat.key)"
+              title="Deactivate all"
+              :disabled="cat.activeCount === 0 || cat.allPinned"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <line x1="18" y1="6" x2="6" y2="18"/>
+                <line x1="6" y1="6" x2="18" y2="18"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="dropdown-footer">
+        <RouterLink to="/tools" class="manage-link" @click="isOpen = false">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="12" cy="12" r="3"/>
+            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+          </svg>
+          Manage all tools
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tools-dropdown-container {
+  position: relative;
+}
+
+.dropdown-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-hover);
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.dropdown-trigger:hover {
+  background: var(--bg-tertiary, rgba(255,255,255,0.1));
+  color: var(--text-primary);
+}
+
+.badge {
+  background: #f59e0b;
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 600;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+  min-width: 18px;
+  text-align: center;
+}
+
+.chevron {
+  transition: transform 0.2s ease;
+}
+
+.chevron.open {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 280px;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  z-index: 1000;
+  overflow: hidden;
+}
+
+.dropdown-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.header-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-secondary);
+}
+
+.header-stats {
+  font-size: 0.7rem;
+  color: var(--text-muted);
+}
+
+.categories-list {
+  padding: 0.5rem;
+}
+
+.category-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0.625rem;
+  border-radius: 8px;
+  margin-bottom: 0.25rem;
+  transition: background 0.15s;
+}
+
+.category-item:hover {
+  background: var(--bg-hover);
+}
+
+.category-info {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.category-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: var(--bg-primary);
+  border-radius: 6px;
+  color: var(--cat-color);
+}
+
+.category-details {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.category-name {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.category-count {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+}
+
+.category-actions {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--border-color);
+  border-radius: 5px;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.action-btn:hover:not(:disabled) {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+}
+
+.action-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.pin-btn:hover:not(:disabled) {
+  color: #f59e0b;
+  border-color: #f59e0b;
+}
+
+.pin-btn.pinned {
+  color: #f59e0b;
+  background: rgba(245, 158, 11, 0.15);
+  border-color: #f59e0b;
+}
+
+.activate-btn:hover:not(:disabled) {
+  color: #10b981;
+  border-color: #10b981;
+}
+
+.deactivate-btn:hover:not(:disabled) {
+  color: #ef4444;
+  border-color: #ef4444;
+}
+
+.dropdown-footer {
+  padding: 0.5rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.manage-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border-radius: 6px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  font-size: 0.8rem;
+  transition: all 0.15s;
+}
+
+.manage-link:hover {
+  background: var(--bg-hover);
+  color: var(--accent);
+}
+</style>

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'],

frontend/src/services/tools/handlers/globalHandlers.ts

@@ -6,7 +6,18 @@ export function setRouter(router: any) {
   routerInstance = router
 }
 
-export function createGlobalHandlers(getRegisteredTools: () => string[]): ToolConfig[] {
+export interface ToolManagementCallbacks {
+  getRegisteredTools: () => string[]
+  getAllToolNames: () => string[]
+  activateTool: (name: string) => Promise<boolean>
+  deactivateTool: (name: string) => boolean
+  togglePin: (name: string) => void
+  isToolPinned: (name: string) => boolean
+}
+
+export function createGlobalHandlers(callbacks: ToolManagementCallbacks): ToolConfig[] {
+  const { getRegisteredTools, getAllToolNames, activateTool, deactivateTool, togglePin, isToolPinned } = callbacks
+  const allToolNames = getAllToolNames()
   return [
     {
       name: 'get_current_page',
@@ -103,6 +114,100 @@ export function createGlobalHandlers(getRegisteredTools: () => string[]): ToolCo
         }
         return `Herramientas MCP disponibles (${tools.length}):\n${tools.map(t => `  - ${t}`).join('\n')}`
       }
+    },
+    {
+      name: 'activate_tool',
+      description: 'Activa una herramienta MCP para que este disponible',
+      category: 'global',
+      schema: {
+        type: 'object',
+        properties: {
+          tool_name: {
+            type: 'string',
+            enum: allToolNames,
+            description: 'Nombre de la herramienta a activar'
+          }
+        },
+        required: ['tool_name']
+      },
+      handler: async (args: { tool_name: string }) => {
+        const activeTools = getRegisteredTools()
+        if (activeTools.includes(args.tool_name)) {
+          return `La herramienta "${args.tool_name}" ya esta activa`
+        }
+
+        const success = await activateTool(args.tool_name)
+        if (success) {
+          return `Herramienta "${args.tool_name}" activada correctamente`
+        } else {
+          return `Error: No se pudo activar "${args.tool_name}". Verifica que el nombre sea correcto.`
+        }
+      }
+    },
+    {
+      name: 'deactivate_tool',
+      description: 'Desactiva una herramienta MCP. Si esta pinneada, la despinea primero.',
+      category: 'global',
+      schema: {
+        type: 'object',
+        properties: {
+          tool_name: {
+            type: 'string',
+            enum: allToolNames,
+            description: 'Nombre de la herramienta a desactivar'
+          }
+        },
+        required: ['tool_name']
+      },
+      handler: (args: { tool_name: string }) => {
+        const activeTools = getRegisteredTools()
+        if (!activeTools.includes(args.tool_name)) {
+          return `La herramienta "${args.tool_name}" no esta activa`
+        }
+
+        // Si esta pinneada, despinear primero
+        if (isToolPinned(args.tool_name)) {
+          togglePin(args.tool_name)
+        }
+
+        const success = deactivateTool(args.tool_name)
+        if (success) {
+          return `Herramienta "${args.tool_name}" desactivada correctamente`
+        } else {
+          return `Error: No se pudo desactivar "${args.tool_name}"`
+        }
+      }
+    },
+    {
+      name: 'pin_tool',
+      description: 'Pinnea una herramienta MCP. Las herramientas pinneadas permanecen activas al cambiar de pagina.',
+      category: 'global',
+      schema: {
+        type: 'object',
+        properties: {
+          tool_name: {
+            type: 'string',
+            enum: allToolNames,
+            description: 'Nombre de la herramienta a pinnear'
+          }
+        },
+        required: ['tool_name']
+      },
+      handler: async (args: { tool_name: string }) => {
+        if (isToolPinned(args.tool_name)) {
+          return `La herramienta "${args.tool_name}" ya esta pinneada`
+        }
+
+        togglePin(args.tool_name)
+
+        // Asegurar que este activa
+        const activeTools = getRegisteredTools()
+        if (!activeTools.includes(args.tool_name)) {
+          await activateTool(args.tool_name)
+        }
+
+        return `Herramienta "${args.tool_name}" pinneada. Permanecera activa al cambiar de pagina.`
+      }
     }
   ]
 }

frontend/src/services/tools/toolDefinitions.ts

@@ -12,6 +12,9 @@ export const ALL_TOOL_METAS: ToolMeta[] = [
   { name: 'get_current_page', description: 'Obtiene la pagina actualmente activa', category: 'global' },
   { name: 'navigate_to', description: 'Navega a una pagina especifica', category: 'global' },
   { name: 'list_available_tools', description: 'Lista todas las herramientas MCP disponibles', category: 'global' },
+  { name: 'activate_tool', description: 'Activa una herramienta MCP', category: 'global' },
+  { name: 'deactivate_tool', description: 'Desactiva una herramienta MCP', category: 'global' },
+  { name: 'pin_tool', description: 'Pinnea una herramienta', category: 'global' },
 
   // Canvas tools
   { name: 'render_html', description: 'Renderiza HTML en el canvas', category: 'canvas' },

frontend/src/services/webmcp.ts

@@ -2,6 +2,7 @@ import { useCanvasStore } from '../stores/canvas'
 
 let webmcpInstance: any = null
 const registeredTools = new Set<string>()
+const eventUnsubscribers: Array<() => void> = []
 
 const API_BASE = 'http://localhost:4101'
 let tokenPollingInterval: number | null = null
@@ -13,31 +14,130 @@ export async function initWebMCP() {
   const WebMCP = WebMCPModule.default || WebMCPModule
 
   webmcpInstance = new WebMCP({
-    color: '#6366f1',
+    headless: true,
-    position: 'bottom-right',
     inactivityTimeout: 60 * 60 * 1000 // 1 hora
   })
 
-  const canvasStore = useCanvasStore()
+  setupEventHandlers()
-
-  webmcpInstance.on?.('connected', () => {
-    canvasStore.setConnected(true)
-  })
-
-  webmcpInstance.on?.('disconnected', () => {
-    canvasStore.setConnected(false)
-  })
 
+  // Check initial connection state
   if (webmcpInstance.isConnected) {
+    const canvasStore = useCanvasStore()
     canvasStore.setConnected(true)
+    updateConnectionInfo()
   }
 
-  // Exponer globalmente para debug
+  // Expose globally for debug
   ;(window as any).webmcp = webmcpInstance
 
   return webmcpInstance
 }
 
+function setupEventHandlers() {
+  // Skip if instance doesn't support events
+  if (typeof webmcpInstance.on !== 'function') {
+    console.warn('[WebMCP] Event emitter not available')
+    return
+  }
+
+  const canvasStore = useCanvasStore()
+
+  // Connection events
+  eventUnsubscribers.push(
+    webmcpInstance.on('connected', () => {
+      console.log('[WebMCP] Connected')
+      canvasStore.setConnected(true)
+      canvasStore.setReconnecting(false)
+      canvasStore.setConnectionError(null)
+      updateConnectionInfo()
+    })
+  )
+
+  eventUnsubscribers.push(
+    webmcpInstance.on('disconnected', () => {
+      console.log('[WebMCP] Disconnected')
+      canvasStore.setConnected(false)
+      canvasStore.setReconnecting(false)
+      canvasStore.setConnectionInfo(null)
+    })
+  )
+
+  eventUnsubscribers.push(
+    webmcpInstance.on('reconnecting', () => {
+      console.log('[WebMCP] Reconnecting...')
+      canvasStore.setReconnecting(true)
+    })
+  )
+
+  // Status changes
+  eventUnsubscribers.push(
+    webmcpInstance.on('statusChange', (data: { status: string }) => {
+      canvasStore.setConnectionStatus(data.status)
+    })
+  )
+
+  // Error handling
+  eventUnsubscribers.push(
+    webmcpInstance.on('error', (data: { message: string }) => {
+      console.error('[WebMCP] Error:', data.message)
+      canvasStore.setConnectionError(data.message)
+      canvasStore.showNotification(data.message, 'error')
+    })
+  )
+
+  // Tool events
+  eventUnsubscribers.push(
+    webmcpInstance.on('toolRegistered', (data: { name: string }) => {
+      console.log('[WebMCP] Tool registered by server:', data.name)
+      updateConnectionInfo()
+    })
+  )
+
+  eventUnsubscribers.push(
+    webmcpInstance.on('toolCreated', (data: { name: string }) => {
+      console.log('[WebMCP] Tool created:', data.name)
+      registeredTools.add(data.name)
+      updateConnectionInfo()
+    })
+  )
+
+  eventUnsubscribers.push(
+    webmcpInstance.on('toolRemoved', (data: { name: string }) => {
+      if (data.name === '*') {
+        console.log('[WebMCP] All tools removed')
+        registeredTools.clear()
+      } else {
+        console.log('[WebMCP] Tool removed:', data.name)
+        registeredTools.delete(data.name)
+      }
+      updateConnectionInfo()
+    })
+  )
+}
+
+function updateConnectionInfo() {
+  if (!webmcpInstance) return
+
+  const canvasStore = useCanvasStore()
+  const info = webmcpInstance.getConnectionInfo?.()
+
+  if (info) {
+    canvasStore.setConnectionInfo({
+      isConnected: info.isConnected,
+      channel: info.channel,
+      server: info.server,
+      status: info.status,
+      tools: info.tools || [],
+      prompts: info.prompts || [],
+      resources: info.resources || []
+    })
+  }
+}
+
+export function getConnectionInfo() {
+  return webmcpInstance?.getConnectionInfo?.() || null
+}
+
 export function getWebMCP() {
   return webmcpInstance
 }
@@ -91,6 +191,26 @@ export function clearAllTools() {
   registeredTools.clear()
 }
 
+export function destroyWebMCP() {
+  // Unsubscribe all event handlers
+  for (const unsub of eventUnsubscribers) {
+    unsub()
+  }
+  eventUnsubscribers.length = 0
+
+  // Clear tools
+  clearAllTools()
+
+  // Disconnect if connected
+  if (webmcpInstance?.disconnect) {
+    webmcpInstance.disconnect()
+  }
+
+  webmcpInstance = null
+  ;(window as any).webmcp = null
+  console.log('[WebMCP] Instance destroyed')
+}
+
 export function getRegisteredTools(): string[] {
   return [...registeredTools]
 }
@@ -151,27 +271,27 @@ export function parseToken(token: string): { server: string; token: string } | n
 }
 
 export async function connectWithToken(token: string): Promise<boolean> {
-  const parsed = parseToken(token)
+  if (!webmcpInstance) {
-  if (!parsed) return false
+    console.error('[WebMCP] Instance not initialized')
+    return false
+  }
 
-  console.log('[WebMCP] Connecting with token to:', parsed.server)
+  if (typeof webmcpInstance.connect !== 'function') {
+    console.error('[WebMCP] connect method not available')
+    return false
+  }
 
-  // Store token for webmcp to use
+  console.log('[WebMCP] Connecting with token...')
-  localStorage.setItem('webmcp_token', token)
 
   // Clear the pending token from server
   await clearToken()
 
-  // If webmcp is already initialized, try to reconnect
+  // Connect passing the token directly
-  if (webmcpInstance && typeof webmcpInstance.connect === 'function') {
+  try {
-    try {
+    await webmcpInstance.connect(token)
-      await webmcpInstance.connect()
+    return true
-      return true
+  } catch (e) {
-    } catch (e) {
+    console.error('[WebMCP] Failed to connect:', e)
-      console.error('[WebMCP] Failed to connect:', e)
+    return false
-      return false
-    }
   }
-
-  return true
 }

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,