feat: Auto-connect WebMCP without agent intervention

- Add requestToken() and autoConnect() functions to request tokens directly from WebMCP server
- Add /api/webmcp-request-token endpoint to proxy token requests (for HTTPS/Traefik)
- Add webmcpHttp endpoint configuration for direct WebMCP HTTP API access
- Update App.vue to auto-connect on load with polling fallback
- Add kill-ports script to clear ports 4101, 4102, 4103, 4105 before starting

frontend/src/services/webmcp.ts

@@ -1,6 +1,9 @@
 import { useCanvasStore } from '../stores/canvas'
 import { endpoints, isSecure, wsProtocol, hostname } from '../config/endpoints'
 
+// WebMCP HTTP API base for direct token requests
+const WEBMCP_HTTP = endpoints.webmcpHttp
+
 let webmcpInstance: any = null
 const registeredTools = new Set<string>()
 const eventUnsubscribers: Array<() => void> = []
@@ -271,6 +274,76 @@ export function parseToken(token: string): { server: string; token: string } | n
   }
 }
 
+/**
+ * Request a new token directly from WebMCP server via HTTP API
+ * In development: calls WebMCP directly at port 4102
+ * In production (HTTPS): calls Agent UI API which proxies to WebMCP
+ */
+export async function requestToken(): Promise<string | null> {
+  try {
+    console.log('[WebMCP] Requesting token from server...')
+
+    // In HTTPS mode, use Agent UI API as proxy (Traefik can't reach WebMCP directly)
+    // In development, call WebMCP directly
+    const url = isSecure ? `${API_BASE}/webmcp-request-token` : `${WEBMCP_HTTP}/token`
+
+    const res = await fetch(url, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' }
+    })
+
+    if (!res.ok) {
+      console.error('[WebMCP] Failed to request token:', res.status)
+      return null
+    }
+
+    // Check if response is JSON
+    const contentType = res.headers.get('content-type')
+    if (!contentType?.includes('application/json')) {
+      console.warn('[WebMCP] /token endpoint not available (server returned non-JSON)')
+      return null
+    }
+
+    const data = await res.json()
+    if (data.success && data.token) {
+      console.log('[WebMCP] Token received from server')
+      return data.token
+    }
+    return null
+  } catch (e) {
+    // Network error or endpoint not available
+    console.warn('[WebMCP] /token endpoint not available:', (e as Error).message)
+    return null
+  }
+}
+
+/**
+ * Auto-connect to WebMCP by requesting a token and connecting
+ * Returns true if connection was successful
+ */
+export async function autoConnect(): Promise<boolean> {
+  if (!webmcpInstance) {
+    console.error('[WebMCP] Instance not initialized, call initWebMCP() first')
+    return false
+  }
+
+  // Check if already connected
+  if (webmcpInstance.isConnected) {
+    console.log('[WebMCP] Already connected')
+    return true
+  }
+
+  // Request token from server
+  const token = await requestToken()
+  if (!token) {
+    console.error('[WebMCP] Failed to get token')
+    return false
+  }
+
+  // Connect with the token
+  return connectWithToken(token)
+}
+
 export async function connectWithToken(token: string): Promise<boolean> {
   if (!webmcpInstance) {
     console.error('[WebMCP] Instance not initialized')